/* One guide (shared/guides/guides-ui.js), used by the website's /guides hub and the app's "?" sheets.
   Dark, like both products. Colours are local so it reads the same on either page. */
.g-guide { --g-fg: #ECEEF1; --g-fg2: #C9CED6; --g-mu: #8A9099; --g-hi: #FFFFFF; --g-line: rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 12px; color: var(--g-fg); text-align: left; }
.g-head { display: flex; align-items: center; gap: 12px; }
.g-icon { width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover; background: #0A0A0A; }
.g-title { margin: 0; font-size: 19px; line-height: 1.2; letter-spacing: -.01em; }
.g-what { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: var(--g-fg2); }
.g-stage { width: 100%; max-width: 280px; margin: 0 auto; }
.g-safety { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #FFB4AE;
  background: rgba(239,83,80,.1); border: 1px solid rgba(239,83,80,.35); }
.g-tip { margin: 0; font-size: 14px; line-height: 1.5; color: var(--g-fg2); }
.g-tip b { color: var(--g-fg); }
.g-more { font-size: 13.5px; line-height: 1.55; color: var(--g-mu); border-top: 1px solid var(--g-line); padding-top: 10px; }
.g-more summary { cursor: pointer; color: var(--g-hi); font-weight: 600; min-height: 32px; display: flex; align-items: center; list-style: none; }
.g-more summary::-webkit-details-marker { display: none; }
.g-more summary::after { content: "▾"; margin-left: 6px; transition: transform .2s; }
.g-more[open] summary::after { transform: rotate(180deg); }
.g-more p { margin: 4px 0 0; }
.g-risk { margin: 0; font-size: 12px; color: var(--g-mu); }
.g-term { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: help; text-decoration: underline dotted rgba(255, 255, 255,.8); text-underline-offset: 3px; }
.g-term:focus-visible { outline: 2px solid var(--g-hi); outline-offset: 2px; border-radius: 3px; }
.g-pop { margin: 6px 0 2px; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45; color: var(--g-fg2); background: #1F242B; border: 1px solid rgba(255, 255, 255,.35); }
.g-pop b { color: var(--g-hi); text-transform: capitalize; margin-right: 4px; }
/* list cards */
.g-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 12px; text-align: left; font: inherit; color: #ECEEF1;
  background: #121315; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; cursor: pointer; transition: border-color .2s, transform .2s, background .2s; }
.g-card:hover { border-color: rgba(255, 255, 255,.4); background: #181C22; }
.g-card:active { transform: scale(.985); }
.g-card:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.g-card .g-icon { width: 48px; height: 48px; border-radius: 12px; }
.g-card span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.g-card b { font-size: 15px; } .g-card small { font-size: 12.5px; line-height: 1.4; color: #8A9099; }
@media (prefers-reduced-motion: reduce) { .g-card, .g-more summary::after { transition: none; } }
/* Pipsly: the 3D icons and covers in monochrome chrome */
.g-icon, .gh-cover img { filter: grayscale(1) contrast(1.08) brightness(1.05); }