/* v5 "Sorting Bays": styles for the cli page group only. Loaded after v5.css on those pages. See DESIGN.md §v5-bays.
   The CLI page (cli.html) no longer loads cli-page.css, cli-v2.css or v6.css: everything it needs is here.
   Monospace is used for code and terminal output only. */

.cli5 {
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --term: #0e0e0e;          /* the terminal panel stays black in both themes */
  --term-bar: #262626;
  --term-text: #e6e6e1;
  --chip: var(--yard);
}
.cli5 .c-alt { background: var(--yard); --chip: var(--sign); }
.cli5 code, .cli5 kbd, .cli5 pre { font-family: var(--mono); border-radius: 0; }
.cli5 :not(pre) > code { font-size: .88em; background: var(--chip); color: var(--ink); padding: .08em .32em; border: 0; }
.cli5 kbd { font-size: .88em; border: var(--rule-thin) solid var(--line-2); padding: 0 .3em; background: var(--sign); color: var(--ink); }
.cli5 a { color: var(--accent); }
.cli5 .y-section { scroll-margin-top: 72px; }
.cli5 #install { scroll-margin-top: 88px; }

/* ---- the sign board: headline, what it is, and the install board ---- */
.c-sign-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding-bottom: clamp(28px, 3vw, 44px); }
.c-sign-grid h1 { font-size: clamp(42px, 6vw, 84px); max-width: 18ch; }
.c-facts { list-style: none; margin: clamp(22px, 2.4vw, 32px) 0 0; padding: 0; border-top: var(--rule-thin) solid var(--line-2); max-width: 46ch; }
.c-facts li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.45; color: var(--text); }
.c-facts b { display: block; font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink); }
.c-say-more { margin: 18px 0 0; font-weight: 750; font-size: 16.5px; }

.c-get { min-width: 0; }
.c-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--rule-thin) solid var(--line-2); border-bottom: 0; }
.c-tabs [role="tab"] { font: 800 16.5px/1.15 var(--display); color: var(--ink); background: var(--sign); border: 0; border-radius: 0; min-height: 54px; padding: 10px 12px; cursor: pointer; transition: background-color .16s var(--ease-out), color .16s var(--ease-out); }
.c-tabs [role="tab"] + [role="tab"] { border-left: var(--rule-thin) solid var(--line-2); }
.c-tabs [role="tab"]:hover { background: var(--yard); }
.c-tabs [role="tab"][aria-selected="true"] { background: var(--inkk); color: var(--sign); }
html:not(.c-js) .c-tabs { display: none; }
.c-pane { border: var(--rule-thin) solid var(--line-2); padding: 16px clamp(14px, 1.6vw, 20px) 14px; background: var(--sign); }
html:not(.c-js) .c-pane + .c-pane { border-top: 0; }
.c-js .c-pane-name { display: none; }
.c-pane-name { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); }
.c-cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; border: var(--rule-thin) solid var(--line-2); background: var(--term); }
.c-cmd code { display: block; margin: 0; padding: 14px 16px; background: transparent !important; color: #fff !important; font-size: 15px !important; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-copy { font: 800 16px/1 var(--display); min-width: 96px; min-height: 50px; padding: 0 18px; border: 0; border-left: var(--rule-thin) solid var(--line-2); border-radius: 0; background: var(--sign); color: var(--ink); cursor: pointer; transition: background-color .16s var(--ease-out), color .16s var(--ease-out); }
.c-copy:hover { background: var(--bay1); color: #fff; }
.c-where { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--muted); max-width: 60ch; }

/* ---- terminal panels: real output, so the mono face belongs here ---- */
.c-term { margin: 0; background: var(--term); border: var(--rule-thin) solid var(--line-2); min-width: 0; color: var(--term-text); }
.c-term-bar { display: flex; gap: 8px; align-items: center; padding: 8px 14px; background: var(--term-bar); color: #cfcfc8; font: 700 13.5px/1.3 var(--display); }
.c-term-bar span:first-child:not(:only-child) { color: #8a8a83; }
.c-term pre { margin: 0; padding: 16px 18px 18px; background: transparent; color: var(--term-text); font-size: 13.5px; line-height: 1.55; white-space: pre; overflow-x: auto; tab-size: 4; scrollbar-width: thin; border: 0; }
.c-term pre:focus-visible { outline: 3px solid var(--bay2); outline-offset: -3px; }
.c-term .p { color: #fff; font-weight: 700; }
.c-term .y { color: #f0b54a; }
.c-term .g { color: #6fd29b; }
.c-term .r { color: #ff8a73; }
.c-term .c { display: inline-block; width: .6em; height: 1.1em; vertical-align: text-bottom; background: var(--term-text); animation: c-blink 1s steps(1) infinite; }
@keyframes c-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .c-term .c { animation: none; } }
.c-why { margin-top: 18px; }
.c-why pre { min-height: calc(7 * 1.55em + 34px); }
.c-term-note { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }

/* ---- the three bays, as clean sorts them ---- */
.c-bays .y-bay { padding-bottom: clamp(60px, 5vw, 72px); }
.c-rows li { font-size: 16.5px; }
.c-bay-cmd { margin: auto 0 0; }
.c-bay-cmd code { display: inline-block; font-size: 14.5px !important; padding: 6px 10px !important; background: transparent !important; color: inherit !important; border: var(--rule-thin) solid currentColor !important; }
.c-bays .y-cap code { background: transparent; color: inherit; padding: 0; font-size: .95em; }

/* ---- demo video ---- */
.c-video { margin: 0; border: var(--rule) solid var(--inkk); background: #000; line-height: 0; }
.c-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

/* ---- the app's own screens ---- */
.c-story { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.c-asks { list-style: none; margin: 0; padding: 0; border-top: var(--rule-thin) solid var(--line-2); }
.c-asks li { border-bottom: 1px solid var(--line); }
.c-asks h3 { margin: 0; font-size: 20px; }
.c-asks h3 button { display: block; width: 100%; text-align: left; font: 800 clamp(18px, 1.5vw, 21px)/1.2 var(--display); color: var(--ink); background: transparent; border: 0; border-radius: 0; padding: 14px 12px; cursor: pointer; transition: background-color .16s var(--ease-out), color .16s var(--ease-out); }
.c-asks h3 button:hover { background: var(--sign); }
.c-asks li.on h3 button { background: var(--inkk); color: var(--sign); }
.c-asks p { margin: 0; padding: 12px 12px 8px; font-size: 16px; line-height: 1.5; color: var(--text); }
.c-asks li > code { display: inline-block; margin: 0 12px 14px; }
.c-js .c-asks li:not(.on) > p, .c-js .c-asks li:not(.on) > code { display: none; }
.c-stage { position: sticky; top: 84px; min-width: 0; }
.c-term-app pre { font-size: 11.5px; line-height: 1.32; padding: 12px; min-height: 22em; }
.c-more { display: flex; flex-wrap: wrap; margin-top: 14px; border-top: var(--rule-thin) solid var(--line-2); border-left: var(--rule-thin) solid var(--line-2); }
.c-more:empty { display: none; }
.c-more button { font: 750 15px/1 var(--display); color: var(--ink); background: var(--sign); border: 0; border-right: var(--rule-thin) solid var(--line-2); border-bottom: var(--rule-thin) solid var(--line-2); border-radius: 0; padding: 12px 14px; min-height: 44px; cursor: pointer; }
.c-more button:hover { background: var(--yard); }
.c-more button[aria-pressed="true"] { background: var(--inkk); color: var(--sign); }

/* ---- a terminal beside ruled rows ---- */
.c-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.c-rows-list { margin: 0; border-top: var(--rule-thin) solid var(--line-2); }
.c-rows-list > div { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.c-rows-list dt { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--ink); margin: 0 0 4px; }
.c-rows-list dt code { font-size: .85em; }
.c-rows-list dd { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--text); max-width: 58ch; }
.c-run, .c-cmdline code { display: block; width: fit-content; max-width: 100%; margin-top: 10px; padding: 6px 10px !important; font-size: 14px !important; white-space: pre-wrap; overflow-wrap: anywhere; }
#care .c-two { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.c-rows-wide dt { font-size: clamp(20px, 1.8vw, 26px); }

.c-forecast { margin: 0 0 clamp(32px, 4vw, 56px); padding: clamp(20px, 2.4vw, 32px) 0; border-top: var(--rule-thin) solid var(--line-2); border-bottom: var(--rule-thin) solid var(--line-2); }
.c-forecast blockquote { margin: 0; }
.c-forecast blockquote p { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: var(--ink); max-width: 36ch; font-variant-numeric: tabular-nums; }
.c-forecast figcaption { margin-top: 14px; font-size: 15px; color: var(--muted); max-width: 72ch; }

.c-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-thin) solid var(--line-2); }
.c-pair article { padding: clamp(22px, 2.6vw, 36px) clamp(20px, 3vw, 44px) 0 0; min-width: 0; }
.c-pair article + article { padding-left: clamp(20px, 3vw, 44px); padding-right: 0; border-left: var(--rule-thin) solid var(--line-2); }
.c-pair h3 { font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 12px; }
.c-pair p { font-size: 17px; line-height: 1.55; max-width: 58ch; }
.c-list { margin: 16px 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.c-list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 16.5px; line-height: 1.5; }
.c-cmdline { margin: 10px 0 0; }
.c-cmdline code { margin-top: 0; }

.c-term-wide { margin-bottom: clamp(28px, 3vw, 44px); }
.c-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: var(--rule-thin) solid var(--line-2); background: var(--sign); }
.c-three > div { padding: clamp(18px, 2vw, 28px); min-width: 0; }
.c-three > div + div { border-left: var(--rule-thin) solid var(--line-2); }
.c-three dt { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.8vw, 24px); color: var(--ink); margin: 0 0 8px; }
.c-three dd { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--text); }
.c-three dd + dd { margin-top: 18px; }

#rescue-usb .y-board { margin-bottom: 28px; }

/* ---- every command ---- */
.c-cmds { columns: 3 320px; column-gap: clamp(24px, 3vw, 48px); }
.c-group { break-inside: avoid; margin: 0 0 clamp(24px, 2.6vw, 36px); border-top: var(--rule-thin) solid var(--line-2); }
.c-group h3 { font-size: 21px; margin: 10px 0 4px; }
.c-group ul { list-style: none; margin: 0; padding: 0; }
.c-group li { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 4px 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; color: var(--text); }
.c-group li > span:first-child { white-space: nowrap; }
.c-group li > span:first-child code { font-weight: 700; }

/* ---- price ---- */
.c-price { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; padding-bottom: clamp(24px, 3vw, 40px); margin-bottom: clamp(24px, 3vw, 40px); border-bottom: var(--rule-thin) solid var(--line-2); }
.c-zero { margin: 0; display: flex; align-items: baseline; gap: 14px; font-family: var(--display); color: var(--ink); }
.c-zero b { font-weight: 900; font-size: clamp(80px, 13vw, 200px); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.c-zero span { font-weight: 800; font-size: clamp(20px, 2vw, 28px); }
.c-price-say { margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; max-width: 52ch; }
.c-plans .btn { margin-top: 4px; }
.c-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
.c-split h3 { font-size: 21px; margin: 0 0 6px; padding-top: 10px; border-top: var(--rule-thin) solid var(--line-2); }
.c-split ul { list-style: none; margin: 0; padding: 0; }
.c-split li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 16px; }

/* ---- questions ---- */
.c-faq { border-top: var(--rule-thin) solid var(--line-2); max-width: 980px; }
.c-faq details { border-bottom: 1px solid var(--line); }
.c-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 18px 0; font: 750 clamp(19px, 1.7vw, 23px)/1.25 var(--display); color: var(--ink); }
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after { content: "+"; font-weight: 900; font-size: 1.2em; line-height: 1; flex: none; }
.c-faq details[open] summary::after { content: "\2212"; }
.c-faq summary:hover { color: var(--accent); }
.c-faq details p { margin: 0 0 20px; font-size: 17px; line-height: 1.55; max-width: 70ch; }

/* ---- closing band ---- */
.c-close p { max-width: 56ch; }
.c-close-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 28px 0 0; }
.c-close-btn { display: inline-flex; align-items: center; min-height: 58px; padding: 0 26px; background: #fff; color: #10391f !important; font: 800 18px/1 var(--display); text-decoration: none; border: var(--rule-thin) solid #fff; transition: background-color .16s var(--ease-out), color .16s var(--ease-out); }
.c-close-btn:hover { background: #141414; border-color: #141414; color: #fff !important; text-decoration: none; }
.c-close-link { color: #fff !important; font-weight: 750; font-size: 17px; }

/* ---- breakpoints, matching v5.css ---- */
@media (max-width: 1080px) {
  .c-sign-grid { grid-template-columns: 1fr; }
  .c-get { margin-top: 28px; }
  .c-story { grid-template-columns: 1fr; }
  .c-stage { position: static; }
  .c-two, #care .c-two { grid-template-columns: 1fr; }
  #care .c-two .c-term { order: 2; }
  .c-split { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .c-pair, .c-three { grid-template-columns: 1fr; }
  .c-pair article, .c-pair article + article { padding: 24px 0 28px; border-left: 0; }
  .c-pair article + article { border-top: var(--rule-thin) solid var(--line-2); }
  .c-three > div + div { border-left: 0; border-top: var(--rule-thin) solid var(--line-2); }
  .c-price { grid-template-columns: 1fr; align-items: start; }
  .c-split { grid-template-columns: 1fr; }
  .c-bays .y-bay { padding-bottom: 28px; }
  .c-bay-cmd { margin-top: 4px; }
}
@media (max-width: 560px) {
  .c-tabs [role="tab"] { font-size: 15px; padding: 8px 6px; }
  .c-cmd { grid-template-columns: 1fr; }
  .c-cmd code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px !important; }
  .c-copy { border-left: 0; border-top: var(--rule-thin) solid var(--line-2); min-height: 48px; }
  .c-term pre { font-size: 12.5px; padding: 14px; }
  .c-term-app pre { font-size: 9.5px; }
  .c-group li { grid-template-columns: 1fr; gap: 2px; }
  .c-group li > span:first-child { white-space: normal; }
}

/* fixes after the first look */
.c-bays .c-rows li { display: block; }
.c-bays .c-rows code { background: transparent; color: inherit; border: 1px solid currentColor; padding: 0 .3em; }
.c-price { margin-top: clamp(16px, 2vw, 32px); }
.c-close-btn, .c-close-btn:hover { text-decoration: none !important; }