/* The GBP app's page (gbp.js): the panel's own rows and tokens (app.css); only what a result adds is here. */
.ph .ph-side { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.gbp .tr .what { color: var(--text2); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.gbp .tr { grid-template-columns: 220px minmax(0, 1fr) auto; }
.ph + .stats, .gline + .stats { margin-top: 22px; }

/* Google's side, one line under the page's head; and, in a result, what stands between it and the profile */
.gline, .gpush { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; }
.gline { margin-top: 18px; background: var(--chip); }
.gline > svg.i { flex: none; } .gline p { margin: 0; flex: 1; min-width: 0; color: var(--text); }
.gline small { color: var(--text3); overflow-wrap: anywhere; }
.gline.ok { background: var(--ok-bg); } .gline.ok > svg.i { color: var(--ok); }
.gline.warn { background: var(--warn-bg); } .gline.warn > svg.i { color: var(--warn); }
.gline .btn, .gpush .btn { flex: none; } .btn.primary { height: 30px; padding: 0 14px; font-size: 13px; text-decoration: none; }
.btn.primary:disabled { opacity: .45; cursor: not-allowed; }
.gpush { align-items: flex-start; border: 1px solid var(--line); background: var(--bg); }
.gpush.on { border-color: var(--ok); } .gpush.bad { border-color: var(--bad); }
.gpush > div { flex: 1; min-width: 0; } .gpush p { color: var(--text2); } .gpush ul { margin: 6px 0 0; padding-left: 18px; color: var(--bad); font-size: 13px; }
.gpush .hint { display: block; margin-top: 4px; color: var(--text3); font-size: 12.5px; }
.gpush .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* a part that folds: its arrow, its name, its count; closed until clicked */
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 15px; color: var(--head); }
.fold > summary::-webkit-details-marker, .was > summary::-webkit-details-marker { display: none; }
.fold > summary b { font-weight: 600; } .fold > summary small { font-size: 13px; color: var(--text3); }
.fold > summary svg.i, .was > summary svg.i { width: 13px; height: 13px; align-self: center; transition: transform var(--t-fast); }
.fold[open] > summary svg.i, .was[open] > summary svg.i { transform: rotate(90deg); }
.fold > summary:hover b { text-decoration: underline; }
.page > .fold { margin-top: 30px; } .page > .fold > summary { margin-bottom: 6px; }

/* a client's result, under its row */
.edit.gbp { gap: 10px; padding: 18px 16px 20px; }
.gbp h4 { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: var(--head); } .gbp h4 small { font-weight: 400; color: var(--text3); }
.gbp p { margin: 0; overflow-wrap: anywhere; }
.gbp .picked { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 8px; }
.gbp .picked ul, .gbp .checks ul { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; }
.gbp .picked li small { color: var(--text3); }
.gbp .checks { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); }
.gbp .checks svg.i { flex: none; margin-top: 2px; } .gbp .checks ul { margin-top: 4px; color: var(--text); }
.gbp .ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 4px 0 8px; }
.gbp .ba > div { display: grid; gap: 8px; align-content: start; justify-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.gbp .ba > div:first-child { background: none; color: var(--text2); }
.gbp .gsv { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.gbp .gsv > b { font-weight: 600; display: grid; gap: 6px; justify-items: start; overflow-wrap: anywhere; }
.gbp .was { margin-top: 4px; } .gbp .was > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text3); }
.gbp .was p { color: var(--text2); margin-top: 4px; }
.gbp .all { padding: 4px 0 10px; }
.gbp .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 6px 0; }
.gbp figure { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); display: grid; align-content: start; }
.gbp figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--chip); }
.gbp figcaption { display: grid; gap: 6px; padding: 10px 12px 12px; font-size: 13px; }
.gbp figcaption code { font: 11.5px var(--mono); color: var(--text3); overflow-wrap: anywhere; }
.gbp figcaption .acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 760px) {
  .ph:has(.ph-side) { flex-wrap: wrap; } .ph .ph-side { margin-left: 0; }
  .gbp .tr { grid-template-columns: 1fr; }
  .gline, .gpush { flex-wrap: wrap; } .gline p { flex-basis: calc(100% - 40px); } .gpush .acts { justify-content: flex-start; }
  .gbp .picked, .gbp .ba { grid-template-columns: 1fr; }
  .gbp .gsv { grid-template-columns: 1fr; gap: 6px; } .gbp .gsv > .btn { justify-self: start; }
}