/* Page chrome: the home screen of versions and the view of one version. Card styles live in kit.css and in each
   version's own K.css block. */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%}
body{margin:0;background:#F8EEE2;color:#162412;font:400 16px/1.5 'NB International Pro','Helvetica Neue',Helvetica,Arial,sans-serif}
button{font:inherit;color:inherit}
[hidden]{display:none!important}

.top{position:sticky;top:0;z-index:50;background:rgba(248,238,226,.94);border-bottom:1px solid #E5D2B8;backdrop-filter:blur(8px)}
.top-in{max-width:1040px;margin:0 auto;padding:8px 24px;min-height:57px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.top h1{margin:0 auto 0 0;font:400 22px/1.2 'SN Gangster',Georgia,serif;color:#4C6234;letter-spacing:-.3px}
.to-home{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 12px;border-radius:32px;background:#EFE3D3;color:#4C6234;text-decoration:none;font:500 14px/1 'NB International Pro',Helvetica,Arial,sans-serif;transition:background .15s}
.to-home:hover{background:#E8DAC6}
.to-home:focus-visible{outline:2px solid #A18372;outline-offset:2px}
.on-home .top h1{margin:0}
/* In a version, the version list names where you are; the title only shows on a phone, where the list is hidden. */
@media (min-width:701px){body:not(.on-home) .top h1{display:none}body:not(.on-home) .top #ver{margin-right:auto}}

.seg{display:inline-flex;padding:4px;border-radius:32px;background:#EFE3D3}
.seg button,.seg a{display:inline-flex;align-items:center;border:0;background:none;cursor:pointer;height:36px;padding:0 14px;border-radius:32px;font:500 14px/1 'NB International Pro',Helvetica,Arial,sans-serif;color:#71717A;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.seg button:hover,.seg a:hover{color:#4C6234}
.seg button[aria-pressed=true],.seg a[aria-current]{background:#fff;color:#4C6234}
.seg button:focus-visible,.seg a:focus-visible{outline:2px solid #A18372;outline-offset:1px}
.seg.quiet button{height:32px;padding:0 12px;font-size:13px}

/* ---- Home: the four versions to press, the thread's asks and comments on the whole question. */
.home{max-width:1040px;margin:0 auto;padding:28px 24px 64px;display:grid;gap:28px}
.intro h2{margin:0;font:400 34px/1.15 'SN Gangster',Georgia,serif;color:#4C6234;letter-spacing:-.6px}
.intro p{margin:8px 0 0;max-width:620px;font-size:16px;line-height:1.55;color:#4B5548}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.tile{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#FFFAF5;border:1px solid #E5D2B8;color:inherit;text-decoration:none;cursor:pointer;transition:border-color .2s,transform .2s cubic-bezier(.22,.8,.24,1)}
.tile:hover{border-color:#B9A58C;transform:translateY(-2px)}
.tile:active{transform:none}
.tile:focus-visible{outline:2px solid #4C6234;outline-offset:3px}
.tile-art{display:block;aspect-ratio:2/1;background:#EDE3D5;overflow:hidden}
.tile-art img{display:block;width:100%;height:100%;object-fit:cover}
.tile-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px}
.tile-num{font:400 11px/1.2 'NB International Pro Mono',ui-monospace,Consolas,monospace;letter-spacing:1.3px;text-transform:uppercase;color:#7D9366}
.tile-name{font:400 25px/1.15 'SN Gangster',Georgia,serif;color:#4C6234;letter-spacing:-.4px}
.tile-about{font-size:15px;line-height:1.5;color:#162412}
.tile-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:auto;padding-top:10px;font:400 12px/1.2 'NB International Pro Mono',ui-monospace,Consolas,monospace;color:#8B7E70}
.thread{padding:18px 20px 20px;border-radius:12px;background:#FFFAF5;border:1px solid #E5D2B8}
.thread h2{margin:0 0 10px;font:400 11px/1.2 'NB International Pro Mono',ui-monospace,Consolas,monospace;letter-spacing:1.3px;text-transform:uppercase;color:#7D9366}
.thread ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.thread li{position:relative;padding-left:14px;font-size:14.5px;line-height:1.4}
.thread li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:#B5C4A3}
.thread li span{margin-left:6px;font-size:12.5px;color:#8B7E70;white-space:nowrap}
.thread p{margin:14px 0 0;padding-top:12px;border-top:1px solid #F0E6D8;font-size:13.5px;line-height:1.5;color:#4B5548}
.home-side{display:flex;flex-direction:column;gap:14px}
@media (min-width:1000px){
  .home{grid-template-columns:minmax(0,1fr) 300px;align-items:start;column-gap:24px}
  .home-side{position:sticky;top:76px}
}

/* ---- One version. */
.wrap{max-width:1040px;margin:0 auto;padding:14px 24px 56px}
.about{display:flex;justify-content:flex-end;min-height:28px;margin:0 0 8px}
.again{flex:none;border:0;background:none;padding:6px 0;cursor:pointer;font:500 14px/1.2 'NB International Pro',Helvetica,Arial,sans-serif;color:#4C6234;text-decoration:underline;text-underline-offset:3px}
.again:focus-visible{outline:2px solid #A18372;outline-offset:3px}

/* One card height per window: the whole card fits under the header, so Next sits in the same spot on every step.
   --chrome is everything above the card plus a little air under it. */
:root{--chrome:151px}
.stage{--card-max:700px;--card-h:clamp(588px,calc(100vh - var(--chrome)),var(--card-max));position:relative;border-radius:18px;background:#EDE3D5 url(../img/stage/stage-bg.webp) center/cover;padding:20px 24px;min-height:calc(var(--card-h) + 40px);display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.stage[data-size=phone]{--card-max:660px}
@supports (height:100svh){.stage{--card-h:clamp(588px,calc(100svh - var(--chrome)),var(--card-max))}}
.stage>.mount,.mount>.pane{width:100%;display:flex;justify-content:center}
.pane .kq-card{height:var(--card-h)}

/* Short windows: the card keeps its parts and gives up some air. */
@media (max-height:880px){
  .stage[data-size=desktop] .kq-card{padding:24px 64px 28px}
  .stage[data-size=desktop] .kq-head .kq-back{margin-bottom:12px}
  .stage[data-size=desktop] .kq-body{margin-top:16px}
  .stage[data-size=desktop] .kq-foot{margin-top:16px}
  .stage[data-size=desktop] .kq-vis{margin-top:14px}
}

.side{display:flex;flex-direction:column;gap:14px;margin:16px 0 0}
.read{margin:0;padding:18px 20px 20px;border-radius:12px;background:#FFFAF5;border:1px solid #E5D2B8}
.read h2{margin:0 0 8px;font:400 11px/1.2 'NB International Pro Mono',ui-monospace,Consolas,monospace;letter-spacing:1.3px;text-transform:uppercase;color:#7D9366}
.read p{margin:0;font-size:16px;line-height:1.55;color:#162412}
.read p + p{margin-top:4px}
.read .none{color:#8A8F87}
.saved{margin-top:14px;padding-top:12px;border-top:1px solid #F0E6D8}
.saved summary{cursor:pointer;font:500 14px/1.3 'NB International Pro',Helvetica,Arial,sans-serif;color:#4C6234;list-style-position:inside}
.saved summary:focus-visible{outline:2px solid #A18372;outline-offset:2px;border-radius:2px}
#saved{display:flex;flex-direction:column;gap:3px;margin-top:8px}
#saved .row{display:flex;flex-wrap:wrap;gap:0 8px;font-size:13px;line-height:1.45}
#saved code{font:400 12px/1.6 'NB International Pro Mono',ui-monospace,Consolas,monospace;color:#4C6234}
#saved span{min-width:0;overflow-wrap:anywhere;color:#162412}
#saved .unset span{color:#A1A1AA}

/* Wide windows: the matchmaker panel and comments sit beside the card, so they're in view while you answer. */
@media (min-width:1000px){
  .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:20px;align-items:start}
  .about{grid-column:1/-1}
  .side{margin:0;position:sticky;top:76px;max-height:calc(100vh - 92px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
/* Between phone and wide, the version list takes its own row under the title. */
@media (max-width:999px){
  .top #ver{min-width:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}
  #size{display:none!important}
  #ver a{padding:0 10px}
}

@media (max-width:700px){
  :root{--chrome:78px}
  .top-in{padding:8px 16px;gap:10px;min-height:53px}
  .top h1{font-size:19px}
  .to-home span{display:none}
  .to-home{width:36px;padding:0;justify-content:center}
  .top #ver{display:none!important}
  #size{display:none!important}
  .home{padding:20px 16px 48px;gap:20px}
  .intro h2{font-size:28px}
  .intro p{font-size:15px}
  .tiles{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}
  .tile-name{font-size:23px}
  .wrap{display:flex;flex-direction:column;padding:0 0 48px}
  .stage{padding:12px 0;border-radius:0;min-height:calc(var(--card-h) + 24px)}
  .stage,.stage[data-size=phone]{--card-max:660px}
  .about{order:2;padding:0 16px;margin:14px 0 0}
  .side{order:3;margin:14px 16px 0}
}