/* T-013 Groups worth being in (Channels & market). Full-width card under the first row of the bento; the screen scrolls when it is there. */
.bento > .gw-card { grid-column: 1 / -1; }
@media (min-width: 1024px) and (min-height: 700px) {
  .view > .screen.bento:has(> .gw-card) { flex: 0 0 auto; grid-template-rows: none; grid-auto-rows: auto; }
  .bento:has(> .gw-card) > .card:not(.gw-card) { min-height: 340px; }
  .bento > .gw-card .card-scroll { overflow: visible; }
}


/* list: one row per group; the reason line sits under the name */
.gw-list { display: flex; flex-direction: column; }
.gw-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 92px 128px 76px 92px;
  grid-template-areas: "rank name use peb mem spark" ". reason reason reason reason reason";
  align-items: center; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--line);
}
.gw-row:first-child { border-top: 0; }
.gw-headrow { padding: 0 0 6px; font-size: var(--t-micro); font-family: var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); grid-template-areas: "rank name use peb mem spark"; }
.gw-headrow + .gw-row { border-top: 1px solid var(--line); }
.gw-row .r { text-align: right; justify-self: end; }
.gw-rank { grid-area: rank; color: var(--ink-3); font-size: var(--t-sm); }
.gw-name { grid-area: name; min-width: 0; display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
.gw-name small { color: var(--ink-3); font-size: var(--t-xs); }
.gw-cu { grid-area: use; } .gw-cp { grid-area: peb; } .gw-cm { grid-area: mem; font-size: var(--t-sm); color: var(--ink-2); } .gw-cs { grid-area: spark; }
.gw-reason { grid-area: reason; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }
.gw-k { display: none; }

.gw-open { font: inherit; font-weight: 600; color: var(--ink); background: none; border: 0; padding: 2px 0; text-align: left; cursor: pointer; border-radius: 4px; }
.gw-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-num { font: inherit; color: var(--ink); background: none; border: 0; padding: 4px 6px; margin: -4px -6px; border-radius: 6px; cursor: pointer; min-height: 32px; display: inline-flex; align-items: baseline; gap: 4px; }
.gw-num:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.gw-useful b { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.02em; }
.gw-num .mood.neg { color: var(--neg-text); }
.gw-unc { color: var(--ink-3); font-size: var(--t-xs); white-space: nowrap; }
.gw-spark { display: inline-flex; border-radius: 4px; cursor: crosshair; }
.gw-spark svg { display: block; }
.gw-nc { height: 22px; font-size: var(--t-micro); }
.chip.gw-ours { background: var(--violet-soft); color: color-mix(in srgb, var(--c1) 80%, var(--ink)); }
.gw-table .gw-open { font-weight: 500; }
.gw-table td { vertical-align: top; }

.gw-uncertain { margin-top: 4px; border-top: 1px dashed var(--line-2); padding-top: 6px; }
.gw-urow { display: flex; align-items: center; gap: 12px; padding: 4px 0; flex-wrap: wrap; }
.gw-urow .gw-rank { width: 26px; text-align: left; }

.gw-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-3); }
.gw-foot > span { display: inline-flex; gap: 6px; align-items: center; flex: 1 1 260px; }
.gw-ourslist { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: var(--t-sm); }
.gw-orow { display: inline-flex; align-items: center; gap: 8px; }

.gw-pointed { margin-top: 14px; }
.gw-prow { display: flex; align-items: center; gap: 8px 14px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.gw-pointed .section-label + .gw-prow { border-top: 0; }
.gw-pname { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.gw-pname small { font-size: var(--t-xs); color: var(--ink-3); }
.gw-more { margin-top: 6px; }

/* drawers */
.gw-dsub { margin: 0 0 12px; font-size: var(--t-sm); color: var(--ink-3); }
.gw-stats { margin: 4px 0 18px; }
.gw-stats .gw-num { font-size: inherit; }
.gw-ask { padding: 12px 0; border-top: 1px solid var(--line); }
.gw-ask:first-child { border-top: 0; padding-top: 4px; }
.gw-ask.focus { background: color-mix(in srgb, var(--sun) 12%, transparent); margin: 0 -10px; padding: 12px 10px; border-radius: var(--r-sm); }
.gw-askhead { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.gw-svc { font-weight: 600; min-width: 112px; }
.gw-was { font-size: var(--t-xs); }
.gw-ch { height: 22px; font-size: var(--t-micro); }
.gw-q { margin-top: 8px; }
.gw-askact { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.gw-note { font-size: var(--t-xs); margin: 14px 0 0; }
.gw-dline { font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 4px; }
.gw-empty { display: flex; gap: 8px; align-items: flex-start; padding: 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm); font-size: var(--t-sm); color: var(--ink-3); }
.gw-posts .gw-post:first-child { margin-top: 0; }
.gw-pchips { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.gw-pday { font-size: var(--t-xs); margin-left: auto; }

/* phone: one card per group (rank, name, useful/100, reason); Pebbles Mood and members fold into one small line; no sideways scroll */
@media (max-width: 767px) {
  .gw-headrow { display: none; }
  .gw-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "rank name use" ". peb peb" ". reason reason"; padding: 12px 0; }
  .gw-headrow + .gw-row { border-top: 0; }
  .gw-cm, .gw-cs { display: none; }
  .gw-cp { justify-self: start; text-align: left; display: flex; align-items: baseline; gap: 6px; font-size: var(--t-sm); }
  .gw-cp .gw-k { display: inline; font-size: var(--t-xs); color: var(--ink-3); }
  .gw-cu { display: flex; flex-direction: column; align-items: flex-end; }
  .gw-cu .gw-k { display: block; font-size: var(--t-micro); color: var(--ink-3); }
  .gw-table { display: block; overflow-x: auto; }
  .gw-prow .btn { margin-left: auto; }
}
button.gw-ch { border: 0; cursor: pointer; font: inherit; font-size: var(--t-micro); }
button.gw-ch:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }