/* Guide cover tool (#tab-guidecover, js/guide-covers.js, 2026-10-12). Prefix gcv-. The Steam mock-up uses Steam's
   numbers: picture 160 px, details 436 px, title 24/29 px weight 200, description 13/18 px, 4 lines max. */
.page-tools .top-chrome .nav button[data-tab="guidecover"],.top-chrome .nav button[data-tab="guidecover"]{--tool-icon:url('/static/img/tool-icons/guide.svg?v=1')}
#tab-guidecover{--gcv-line:rgba(130,180,255,.14);--gcv-panel:linear-gradient(180deg,rgba(18,28,56,.72),rgba(8,13,30,.86));--gcv-muted:rgba(214,229,250,.66);--gcv-cyan:#38e1ff;--gcv-violet:#8a7dff}
.gcv-head{display:grid;gap:12px;margin:0 0 18px}
.gcv-title{margin:0;font:900 clamp(24px,2.4vw,34px)/1.15 Montserrat,system-ui,sans-serif;color:#fff}
.gcv-lead{margin:0;max-width:760px;color:var(--gcv-muted);font:500 15px/1.55 Montserrat,system-ui,sans-serif}
.gcv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gcv-upload{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:12px;background:#fff;color:#08101e;font:800 14px/1 Montserrat,system-ui,sans-serif;cursor:pointer}
.gcv-upload::before{content:"⤴";font-size:16px}
.gcv-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.gcv-upload:focus-within{outline:2px solid var(--gcv-cyan);outline-offset:2px}
.gcv-search{flex:1 1 220px;max-width:340px;min-height:40px;padding:0 14px;border:1px solid var(--gcv-line)!important;border-radius:12px!important;background:rgba(255,255,255,.04)!important;color:#fff;font:500 14px Montserrat,system-ui,sans-serif}
.gcv-search:focus{outline:none;border-color:rgba(56,225,255,.55)!important;box-shadow:0 0 0 3px rgba(56,225,255,.12)}
.gcv-link{border:0;background:none;color:#9fe9ff;font:700 13px Montserrat,system-ui,sans-serif;cursor:pointer;text-decoration:none;padding:6px 2px}
.gcv-link:hover{text-decoration:underline}
.gcv-chips{display:flex;flex-wrap:wrap;gap:8px}
#tab-guidecover .gcv-chip{min-height:34px;padding:0 14px;border:1px solid var(--gcv-line)!important;border-radius:999px!important;background:rgba(255,255,255,.03)!important;color:rgba(226,238,255,.82)!important;font:700 13px Montserrat,system-ui,sans-serif;cursor:pointer}
#tab-guidecover .gcv-chip.is-on{border-color:rgba(56,225,255,.6)!important;background:rgba(56,225,255,.12)!important;color:#fff!important}

/* gallery */
/* masonry wall laid out by js fitCards: cards go into the shortest column, a short banner spans two columns only
   where both end at about the same height, so the wall has no holes */
.gcv-grid{position:relative;min-height:200px}
#tab-guidecover .gcv-grid>.gcv-card{position:absolute;top:0;left:0;width:300px}
/* one filter row: theme chips (cyan when chosen), a divider, size chips (violet when chosen) */
.gcv-chips{align-items:center}
.gcv-chips__sep{flex:0 0 1px;align-self:stretch;margin:4px 6px;background:var(--gcv-line)}
#tab-guidecover .gcv-chip[data-size]{border-color:rgba(138,125,255,.28)!important;color:rgba(222,216,255,.86)!important}
#tab-guidecover .gcv-chip[data-size].is-on{border-color:rgba(160,145,255,.75)!important;background:rgba(138,125,255,.2)!important;color:#fff!important}
#tab-guidecover .gcv-chip[data-size]::before{content:"";display:inline-block;width:10px;height:10px;margin-right:7px;border:1.5px solid currentColor;border-radius:2px;vertical-align:-1px}
#tab-guidecover .gcv-chip[data-size=short]::before{height:5px;width:12px}
#tab-guidecover .gcv-chip[data-size=medium]::before{height:14px;width:9px;vertical-align:-3px}
#tab-guidecover .gcv-chip[data-size=long]::before{height:16px;width:6px;vertical-align:-4px}
#tab-guidecover .gcv-chip[data-size=all]::before{display:none}
.gcv-tag--short{background:rgba(56,225,255,.16);color:#bff3ff}.gcv-tag--medium{background:rgba(255,190,80,.16);color:#ffe0a8}
#tab-guidecover .gcv-card{display:grid;gap:8px;width:100%;padding:10px;border:0!important;border-radius:18px!important;background:var(--gcv-panel)!important;box-shadow:inset 0 0 0 1px var(--gcv-line);color:inherit;text-align:left;cursor:pointer;transition:transform .2s,box-shadow .2s}
#tab-guidecover .gcv-card:hover,#tab-guidecover .gcv-card:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(56,225,255,.5),0 18px 40px rgba(0,0,0,.4);outline:none}
.gcv-card__foot{display:flex;align-items:center;gap:8px;padding:2px 4px 0}
.gcv-card__foot b{color:#fff;font:800 15px/1.2 Montserrat,system-ui,sans-serif}
.gcv-card__go{margin-left:auto;color:#9fe9ff;font:800 11px Montserrat,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.gcv-card__desc{margin:0;padding:0 4px 2px;color:var(--gcv-muted);font:500 12.5px/1.45 Montserrat,system-ui,sans-serif}
.gcv-tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;background:rgba(138,125,255,.18);color:#d5ceff;font:800 9.5px Montserrat,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.gcv-count{margin:14px 0 0;color:var(--gcv-muted);font:600 12px Montserrat,system-ui,sans-serif}

/* Steam "Favorite Guide" mock-up */
.gcv-mock{display:flex;gap:8px;padding:10px;border-radius:10px;background:rgba(0,0,0,.42);color:#fff;font:13px/18px "Motiva Sans",Arial,Helvetica,sans-serif;overflow:hidden}
.gcv-mock__img{flex:0 0 160px;width:160px;align-self:flex-start;background:#0c0f17;line-height:0}
.gcv-mock__img canvas{display:block;width:160px;height:auto}
.gcv-mock__info{flex:1 1 auto;min-width:0;max-width:436px}
.gcv-mock__title{max-height:58px;padding-top:10px;overflow:hidden;font-size:24px;font-weight:200;line-height:29px;white-space:nowrap;text-overflow:ellipsis}
.gcv-mock__by{margin:4px 0 8px;color:#acb2b8;font-size:12px}
.gcv-mock__by b{color:#fff;font-weight:400}
.gcv-mock__desc{width:436px;max-width:100%;max-height:72px;overflow:hidden;color:#acb2b8;overflow-wrap:normal;word-break:normal}
.gcv-mock__rate{margin-top:8px;color:#898989;font-size:11px;text-align:right}
/* gallery cards show the mock-up at Steam's real size, scaled to the card (js sets --gcv-k = card width / 620) */
.gcv-mock--small{width:620px;zoom:var(--gcv-k,.5)}

/* editor */
.gcv-etop{display:grid;gap:4px;margin:0 0 14px}
#tab-guidecover .gcv-back{justify-self:start;min-height:34px;padding:0 14px;border:1px solid var(--gcv-line)!important;border-radius:999px!important;background:rgba(255,255,255,.04)!important;color:#d9ecff!important;font:700 13px Montserrat,system-ui,sans-serif;cursor:pointer}
.gcv-etitle{margin:8px 0 0;color:#fff;font:900 26px/1.15 Montserrat,system-ui,sans-serif}
.gcv-edesc{margin:0;color:var(--gcv-muted);font:500 14px Montserrat,system-ui,sans-serif}
.gcv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,420px);gap:18px;align-items:start}
.gcv-left{position:sticky;top:var(--gcv-sticky,128px);display:grid;gap:14px;min-width:0}
.gcv-steam{padding:0 0 10px;border-radius:14px;background:linear-gradient(180deg,rgba(26,36,56,.95),rgba(14,20,34,.95));box-shadow:inset 0 0 0 1px var(--gcv-line);overflow:hidden}
.gcv-steam__head{padding:10px 14px;background:linear-gradient(90deg,rgba(115,173,184,.25),rgba(43,45,68,.4));color:#fff;font:15px "Motiva Sans",Arial,sans-serif}
.gcv-steam .gcv-mock{margin:10px;background:rgba(0,0,0,.25)}
.gcv-big{display:grid;place-items:center;padding:14px;border-radius:14px;background:repeating-conic-gradient(#11182a 0 25%,#0c1222 0 50%) 0 0/20px 20px;box-shadow:inset 0 0 0 1px var(--gcv-line)}
.gcv-big canvas{width:min(320px,100%);height:auto;border-radius:4px;cursor:grab;touch-action:none;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.gcv-big canvas:active{cursor:grabbing}
.gcv-big--long canvas{width:min(200px,70%)}
/* a long strip is taller than the window: the preview column scrolls with the page */
.gcv-cols--long .gcv-left{position:static}
.gcv-note,.gcv-hint{margin:0;color:var(--gcv-muted);font:500 12.5px/1.5 Montserrat,system-ui,sans-serif}
.gcv-right{display:grid;gap:12px;min-width:0}
.gcv-group,.gcv-make{display:grid;gap:10px;padding:16px;border-radius:16px;background:var(--gcv-panel);box-shadow:inset 0 0 0 1px var(--gcv-line)}
.gcv-group h3{margin:0;color:#fff;font:800 12px/1 Montserrat,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.gcv-field{display:grid;gap:6px}
.gcv-field>span{color:rgba(226,238,255,.82);font:700 12.5px Montserrat,system-ui,sans-serif}
.gcv-field[hidden]{display:none!important}
#tab-guidecover .gcv-input{width:100%;min-height:38px;padding:8px 12px;border:1px solid var(--gcv-line)!important;border-radius:10px!important;background:rgba(0,0,0,.25)!important;color:#fff!important;font:500 14px Montserrat,system-ui,sans-serif}
#tab-guidecover .gcv-input:focus{outline:none;border-color:rgba(56,225,255,.55)!important}
#tab-guidecover .gcv-area{min-height:84px;resize:vertical;font-family:"Motiva Sans",Arial,sans-serif}
#tab-guidecover .gcv-out{font-size:13px;color:#cfe3ff!important}
.gcv-outrow{display:flex;gap:8px;align-items:flex-start}
#tab-guidecover .gcv-copy{flex:0 0 auto;min-height:38px;padding:0 14px;border:0!important;border-radius:10px!important;background:rgba(56,225,255,.16)!important;color:#bff3ff!important;font:800 12.5px Montserrat,system-ui,sans-serif;cursor:pointer}
.gcv-seg{display:flex;flex-wrap:wrap;gap:6px}
#tab-guidecover .gcv-seg button,#tab-guidecover .gcv-style{min-height:34px;padding:0 12px;border:1px solid var(--gcv-line)!important;border-radius:10px!important;background:rgba(255,255,255,.03)!important;color:rgba(226,238,255,.86)!important;font:700 13px Montserrat,system-ui,sans-serif;cursor:pointer}
#tab-guidecover .gcv-seg button.is-on,#tab-guidecover .gcv-style.is-on{border-color:rgba(56,225,255,.6)!important;background:rgba(56,225,255,.13)!important;color:#fff!important}
.gcv-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#tab-guidecover .gcv-style{font-family:"Segoe UI Symbol","Segoe UI",Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tab-guidecover input[type=color]{width:56px;height:34px;padding:2px;border:1px solid var(--gcv-line);border-radius:8px;background:transparent}
#tab-guidecover .gcv-btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:0 20px;border:0!important;border-radius:12px!important;background:linear-gradient(135deg,#1fc9f1,#8a7dff)!important;color:#041019!important;font:900 15px Montserrat,system-ui,sans-serif;text-decoration:none;cursor:pointer}
#tab-guidecover .gcv-btn:disabled{opacity:.6;cursor:progress}
#tab-guidecover .gcv-btn--ok{background:#5ff2b5!important}
.gcv-status{margin:0;color:#d9ecff;font:700 13px Montserrat,system-ui,sans-serif}
.gcv-status.is-ok{color:#8ff5c9}.gcv-status.is-error{color:#ff9a9a}
.gcv-result{display:grid;gap:10px;justify-items:start}
.gcv-result:empty{display:none}
.gcv-result__img{width:160px;height:auto;border-radius:4px;box-shadow:0 10px 26px rgba(0,0,0,.4)}
@media (max-width:1100px){.gcv-cols{grid-template-columns:minmax(0,1fr)}.gcv-left{position:static}}
@media (max-width:620px){
  /* filters stay one swipeable row each instead of four wrapped rows */
  .gcv-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px}
  .gcv-chips::-webkit-scrollbar{display:none}
  #tab-guidecover .gcv-chip{flex:0 0 auto}
  .gcv-grid{grid-template-columns:minmax(0,1fr)}
  .gcv-styles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){#tab-guidecover .gcv-card{transition:none}}