/* ---------------------------------------------------------------------------
   Logo Resizing
--------------------------------------------------------------------------- */

.logo-resizing-grid {
  align-items: start;
}

/* Logo panels should end after their actual controls. The shared form-panel
   minimum is useful for the banner wizard but created a large empty footer in
   this compact two-phase tool. */
.logo-resizing-grid > .form-panel {
  min-height: 0;
}

.logo-resizing-grid > [hidden] {
  display: none;
}

/* The card itself is the bordered block, so the remove button can sit inside
   it. A button cannot live inside the <label> without stealing its clicks, so
   it is a sibling positioned over the card's right edge. */
.logo-upload-card {
  position: relative;
  display: flex;
  min-height: 72px;
  align-items: center;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  background: var(--surface-soft);
  margin-bottom: var(--space-4);
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.logo-upload-card:has(.logo-upload-button:hover) {
  border-color: color-mix(in srgb, var(--foreground) 34%, var(--border-strong));
  background: var(--surface-strong);
}

/* The real input is visually hidden, so its focus ring has to be drawn by the
   card. The previous sibling selector pointed at an element order that no
   longer exists and silently matched nothing. */
.logo-upload-card:has(#logo-source-input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Logo Projects sits at view level like Banner Projects, not inside a panel:
   the cards are `--surface`, so a `--surface` panel behind them erased their
   edges entirely. It is the first block in its view, so it drops the shared
   library top margin. */
.logo-project-library {
  margin-top: 0;
}

/* The thumbnail carries the saved mark. Both children share one grid cell so
   the fallback glyph sits behind the image and disappears once it loads. */
.logo-project-thumb {
  aspect-ratio: 16 / 10;
  padding: 20px;
}

.logo-project-thumb > * {
  grid-area: 1 / 1;
}

.logo-project-thumb .project-active-badge {
  align-self: start;
  justify-self: end;
}

.logo-project-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Gated on a real load, not merely on the element being present: a src that is
   still loading or never decodes would otherwise leave an empty tile. */
.logo-project-thumb:has(img[data-loaded]:not([hidden])) .logo-project-thumb-fallback {
  display: none;
}

/* The shared input focus treatment is the blue `--focus`, which reads as a
   second accent beside the white border it sits on. Project Name takes the
   theme foreground on both, so the field glows one colour. */
#logo-project-name:focus {
  border-color: var(--foreground);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--foreground) 20%, transparent);
}

.logo-upload-button {
  display: flex;
  min-height: 72px;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 56px var(--space-3) var(--space-4);
  cursor: pointer;
}

.logo-upload-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--user);
}

.logo-upload-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-upload-copy strong,
.logo-upload-copy small {
  display: block;
}

.logo-upload-copy strong {
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 650;
}

.logo-upload-copy small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 0.7rem;
}

/* Sits inside the upload block rather than beside it, so removing the file is
   attached to the thing being removed. */
.logo-upload-clear {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.logo-upload-clear:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.logo-upload-clear:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-strong);
  color: var(--foreground);
}

.logo-upload-clear:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.logo-upload-clear svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.logo-preview-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.logo-preview-card[hidden] {
  display: none;
}

/* One clean surface. A transparency chequerboard was tried here and read as
   visual noise against the dark theme without telling the user anything they
   act on. */
.logo-preview-stage {
  display: grid;
  min-height: 96px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-3);
  background: var(--surface);
}

.logo-preview-stage img {
  max-width: 100%;
  max-height: 72px;
}

.logo-preview-meta {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.logo-preview-meta div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--space-3);
}

.logo-preview-meta dt {
  color: var(--text-tertiary);
  font-size: 0.7rem;
  font-weight: 650;
}

.logo-preview-meta dd {
  margin: 0;
  color: var(--foreground);
  font-size: 0.72rem;
}

.logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.logo-actions [hidden] {
  display: none !important;
}

.logo-resizing-actions #logo-download-all {
  margin-left: auto;
}

.logo-progress-line {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
  margin-bottom: var(--space-2);
}

/* Generated Files is AI territory end to end, so every state colour in this
   block is the purple AI accent. Green would claim the work as the user's. */
.logo-progress-line span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--ai);
  transition: width var(--motion-base) ease;
}

.logo-output-groups {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.logo-output-group-title {
  margin: 0 0 var(--space-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* `background` and `border` must both be reset explicitly. base.css does not
   neutralise the user-agent button styling, so leaving them out renders the
   header as a filled light-grey box. */
.logo-output-group-toggle {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  color: var(--foreground);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.logo-output-group-toggle:hover {
  color: var(--foreground);
}

.logo-output-group-toggle:hover svg {
  stroke: var(--foreground);
}

.logo-output-group-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.logo-output-group-toggle svg {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-fast) ease, stroke var(--motion-fast) ease;
}

.logo-output-group-toggle[aria-expanded="false"] svg {
  transform: rotate(-90deg);
}

/* The count is pushed to the far edge so a collapsed group still reports its
   progress without any of its rows on screen. */
.logo-output-group-toggle .logo-output-group-count {
  margin-left: auto;
}

.logo-output-group-count {
  color: var(--text-tertiary);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
}

.logo-output-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-output-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
}

.logo-output-row.is-working {
  border-color: color-mix(in srgb, var(--ai) 42%, var(--border));
  background: var(--ai-soft);
}

.logo-output-row.is-done {
  background: var(--surface-soft);
}

.logo-output-row.is-over {
  border-color: color-mix(in srgb, var(--warning) 46%, var(--border));
  background: var(--warning-soft);
}

.logo-output-row.is-failed {
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

.logo-output-state {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-strong);
}

.logo-output-row.is-working .logo-output-state { background: var(--ai); }
.logo-output-row.is-done .logo-output-state { background: var(--ai); }
.logo-output-row.is-over .logo-output-state { background: var(--warning); }
.logo-output-row.is-failed .logo-output-state { background: var(--danger); }

.logo-output-main {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.logo-output-main strong {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 600;
}

.logo-output-meta {
  color: var(--text-tertiary);
  font-size: 0.66rem;
}

.logo-output-status {
  color: var(--text-tertiary);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.logo-output-row.is-done .logo-output-status { color: var(--ai); }
.logo-output-row.is-working .logo-output-status { color: var(--ai); }
.logo-output-row.is-failed .logo-output-status { color: var(--danger); }

.logo-generation-model {
  margin-bottom: var(--space-4);
}

.logo-generation-cards {
  display: grid;
  gap: var(--space-3);
}

.logo-generation-card {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  padding: var(--space-3);
}

.logo-generation-group {
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.logo-error-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4);
}

.logo-error-choice {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: 14px;
  padding: 0;
  background: var(--surface);
}

.logo-error-choice .logo-generation-preview {
  aspect-ratio: 2 / 1;
  min-height: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-soft);
}

.logo-error-choice .logo-generation-preview img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.logo-error-choice > .logo-generation-card-actions {
  min-height: 60px;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

.logo-generation-group-action {
  flex: 0 0 auto;
}

.logo-generation-card.is-working {
  border-color: color-mix(in srgb, var(--ai) 42%, var(--border));
  background: var(--ai-soft);
}

.logo-generation-group.is-working {
  border-color: color-mix(in srgb, var(--ai) 42%, var(--border));
  background: var(--ai-soft);
}

.logo-generation-card.is-failed {
  border-color: var(--danger-border);
  background: var(--danger-soft);
}

.logo-resized-preview-dialog {
  width: min(1040px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.logo-resized-preview-card {
  min-height: 0;
}

.logo-resized-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

/* Close Preview lives in the grid's trailing empty cell rather than on its own
   row underneath, so it lines up with the bottom edge of the last row of cards.
   11 outputs across 3 columns always leave one cell free; if that ever changes
   the button simply takes a row of its own and stays bottom-right. */
.logo-resized-preview-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
}

.logo-resized-preview-item {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
}

.logo-resized-preview-stage {
  display: grid;
  min-height: 156px;
  place-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: var(--space-4);
}

.logo-resized-preview-stage img {
  display: block;
  width: 100%;
  height: 124px;
  object-fit: contain;
}

.logo-resized-preview-fallback {
  color: var(--text-tertiary);
  font-size: 0.68rem;
  font-weight: 650;
}

.logo-resized-preview-item figcaption {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
}

.logo-resized-preview-item figcaption strong {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.72rem;
}

.logo-resized-preview-item figcaption span {
  color: var(--text-tertiary);
  font-size: 0.64rem;
  font-weight: 600;
}

.logo-generation-preview {
  display: grid;
  min-height: 112px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-tertiary);
  font-size: 0.68rem;
  font-weight: 650;
}

/* The error lockups ship with a real alpha channel now, so the preview shows a
   checkerboard: on a flat dark tile a transparent background and a dark solid
   one look identical, which is exactly the thing worth verifying here. */
.logo-generation-preview.has-image {
  background-color: #2a2f3a;
  background-image:
    linear-gradient(45deg, #1b202a 25%, transparent 25%, transparent 75%, #1b202a 75%),
    linear-gradient(45deg, #1b202a 25%, transparent 25%, transparent 75%, #1b202a 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.logo-generation-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: contain;
}

.logo-generation-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.logo-loader-card {
  display: block;
  grid-column: 1 / -1;
  overflow: hidden;
  padding: 0;
}

.logo-loader-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.logo-loader-title,
.logo-loader-title span,
.logo-loader-heading-actions {
  display: flex;
  align-items: center;
}

.logo-loader-title {
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.logo-loader-title strong {
  color: var(--foreground);
  font-size: 0.86rem;
}

.logo-loader-title span,
.logo-loader-heading-actions > span {
  color: var(--text-tertiary);
  font-size: 0.7rem;
}

.logo-loader-heading-actions {
  flex: 0 0 auto;
  gap: var(--space-3);
}

.logo-loader-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-4);
}

.logo-loader-choice,
.logo-error-choice {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.logo-loader-choice.is-selected {
  border-color: var(--user);
  background: color-mix(in srgb, var(--user) 9%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--user) 18%, transparent);
}

.logo-loader-choice.is-working {
  border-color: color-mix(in srgb, var(--ai) 45%, var(--border));
}

.logo-loader-choice.is-failed {
  border-color: var(--danger-border);
}

@media (hover: hover) {
  .logo-loader-choice:not(.is-selected):not(.is-working):not(.is-failed):hover,
  .logo-error-choice:not(.is-working):not(.is-failed):hover {
    border-color: var(--ai-border);
    background: var(--ai-soft);
    box-shadow: none;
  }

  .logo-loader-choice.is-selected:hover {
    border-color: var(--ai-border);
    background: var(--ai-soft);
    box-shadow: none;
  }
}

.logo-loader-select {
  display: grid;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.logo-loader-select:disabled {
  cursor: default;
}

.logo-loader-select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -3px;
  border-radius: 13px;
}

.logo-loader-choice .logo-generation-preview {
  min-height: 208px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-soft);
}

.logo-loader-choice .logo-generation-preview img {
  max-height: 240px;
}

.logo-loader-choice-label {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.logo-loader-choice-label > span:first-child {
  display: grid;
  gap: 2px;
}

.logo-loader-choice-label strong {
  color: var(--foreground);
  font-size: 0.8rem;
}

.logo-loader-choice-label small {
  color: var(--text-tertiary);
  font-size: 0.68rem;
}

.logo-loader-choice-check {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: transparent;
}

.logo-loader-choice-check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-loader-choice.is-selected .logo-loader-choice-check {
  border-color: var(--user);
  background: var(--user);
  color: var(--surface);
}

.logo-loader-choice > .logo-generation-card-actions {
  min-height: 60px;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}

@media (max-width: 720px) {
  .logo-loader-choices,
  .logo-error-choices {
    grid-template-columns: 1fr;
  }

  .logo-loader-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .logo-loader-heading-actions {
    justify-content: space-between;
  }
}

.logo-generation-actions {
  justify-content: flex-start;
  margin-top: var(--space-4);
}

.logo-generation-actions #logo-back-to-resizing {
  margin-right: auto;
}

.logo-output-download {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.logo-output-download:hover:not(:disabled) {
  border-color: var(--border-strong);
  color: var(--foreground);
}

.logo-output-download:disabled {
  cursor: default;
  opacity: 0.4;
}

.logo-output-download svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 680px) {
  .logo-preview-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .logo-upload-card {
    flex-direction: column;
    align-items: stretch;
  }

  .logo-output-row {
    grid-template-columns: 8px minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }

  .logo-output-download {
    grid-column: 3;
    grid-row: 1;
  }
}