/* =========================================================
   Life Archive – die Widgets: Galerie und Einstellungen
   (app/widgets/gallery.js)

   Eine Seite unter Home. Jede Karte zeigt das echte Bild des Widgets –
   gemalt von der Hülle, so wie es auf dem Startbildschirm steht – mit
   Name, einer Zeile, den Größen und „Add to home screen". Die Karten
   schneiden die Ecke wie jede Fläche der App. Seit 13.10.2026 schneiden
   auch die Widgets selbst ihre zwei Ecken (LaWDraw.finish, Entscheidung
   Q1) – die Vorschau steht deshalb auf einem eckigen Grund, nie rund.
   ========================================================= */

.wg-page {
  display: grid;
  gap: 18px;
  padding-block: 16px 96px;
  max-width: 980px;
  margin-inline: auto;
}

.wg-head { display: grid; gap: 6px; max-width: 62ch; }
.wg-head__eyebrow {
  margin: 0;
  font: 500 max(var(--fs-floor), 11px)/1.2 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.wg-head__title { margin: 0; font-size: 24px; line-height: 1.15; text-wrap: balance; }
.wg-head__lede { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.5; }
.wg-head__note { margin: 0; color: var(--text-faint); font-size: 13px; }

.wg-placed-list { margin-top: -6px; display: grid; gap: 8px; }
.wg-placed-list > * { width: 100%; }
.wg-row .sheet-go__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.wg-area { display: grid; gap: 12px; margin-top: 8px; }
.wg-area__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
}
.wg-mark { display: inline-grid; place-items: center; width: 28px; height: 24px; }
.wg-mark svg { width: 28px; height: 24px; }

.wg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.wg-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  clip-path: var(--cut-clip);
  min-width: 0;
}

/* the picture stands on a quiet ground like a home screen – no own frame */
.wg-card__pic {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 100%;
  max-height: 260px;
  margin-inline: auto;
  background:
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--tone, var(--c-home)) 16%, transparent), transparent 70%),
    var(--bg-deep, #0b0d10);
  overflow: hidden;
}
/* the whole widget, never cropped: as wide as it may be, as tall as the box allows */
.wg-card__pic img { display: block; max-width: 100%; max-height: 260px; width: auto; height: auto; }

.wg-card__text { display: grid; gap: 6px; align-content: start; min-width: 0; }
.wg-card__name { margin: 0; font-size: 15px; }
.wg-card__desc { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.wg-card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wg-card__add { justify-self: start; margin-top: 4px; }

.wg-size,
.wg-placed {
  font: 500 max(var(--fs-floor), 10px)/1 var(--font-mono);
  padding: 4px 6px 3px;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
  white-space: nowrap;
}
.wg-placed { border-color: color-mix(in srgb, var(--tone, var(--c-home)) 60%, transparent); color: var(--text); }

.wg-all { margin: 8px 0 0; }

/* placed for a week and never tapped – counted on the phone only (Q7) */
.wg-idle {
  display: block;
  margin-top: 2px;
  font: 400 max(var(--fs-floor), 11px)/1.3 var(--font-mono);
  color: var(--text-faint);
}

/* ---------- one placed widget ---------- */

.wg-edit__preview {
  width: min(100%, 420px);
  max-height: 360px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  background: var(--bg-deep, #0b0d10);
  overflow: hidden;
}
.wg-edit__preview img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; }
.wg-edit__note,
.wg-edit__remove { margin: 0; color: var(--text-faint); font-size: 13px; line-height: 1.5; max-width: 62ch; }

@media (min-width: 720px) {
  .wg-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: 24px; }
  .wg-edit .wg-head,
  .wg-edit .wg-edit__remove { grid-column: 1 / -1; }
  .wg-edit__preview { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); }
}

html[data-eink] .wg-card__pic,
html[data-eink] .wg-edit__preview { background: #fff; border: 2px solid #000; }