/* Tools-siden (milepæl 4) — Photoroom-mønsteret som selvstændig indgang.
   Hub (dropzone + værktøjskort) ↔ editing (stage + editor-panel, samme motor som create).
   Editor-styles kommer fra create.css; her ligger kun sidens egen skal + kortene. */

.tl-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
body.editing .tl-shell { grid-template-columns: minmax(0, 1fr) 300px; }
body.editing .tl-hub { display: none; }
body:not(.editing) .tl-shell .ed-panel { display: none; }
.tl-shell .ed-stage { padding: 0; }

.tl-head { max-width: 62ch; margin-bottom: 1.4rem; }
.tl-head h1 { margin: 0 0 .35rem; font-size: 1.65rem; }
.tl-head p { margin: 0; color: var(--dim); }

/* Dropzonen genbruger .cr-stage-udseendet, men skal ikke fylde en hel skærm */
.tl-drop { min-height: 240px; max-height: 34vh; }

.tl-samples { margin-top: .8rem; }

.tl-grid-head { margin: 2.1rem 0 .9rem; font-size: 1.05rem; color: var(--text); }

.tl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .95rem;
}
.tl-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 0 0 .9rem;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  overflow: hidden;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.tl-card:hover, .tl-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.tl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
}
.tl-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: 0 .85rem;
  font-weight: 600;
  font-size: .95rem;
}
.tl-chip {
  flex: 0 0 auto;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  padding: .1rem .55rem;
}
.tl-chip.tl-free { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tl-sub { padding: 0 .85rem; color: var(--dim); font-size: .8rem; line-height: 1.45; }

@media (max-width: 1100px) {
  body.editing .tl-shell { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tl-drop { min-height: 190px; }
  .tl-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tl-card { transition: none; }
  .tl-card:hover { transform: none; }
}