/*
 * The composer, a modal "New post" dialog: one textarea, quiet attach buttons, an audience <select>, a one-line summary and a
 * near-black Post button. Loads after deck.css. Markup contract lives in deck.js (composer()).
 */
.composer-card {
  font-family: var(--font);
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.composer-card .composer-textarea {
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--radius-control);
  padding: 10px 12px;
}
.composer-card textarea.composer-textarea { min-height: 120px; resize: vertical; }
.composer-card input.composer-link { min-height: var(--control-height); }
.composer-card .composer-textarea::placeholder { color: var(--muted); }
.composer-card .composer-textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.composer-card [hidden] { display: none; }

.composer-card .anchor-box {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--raised);
  border-radius: var(--radius-control);
  padding: 8px 12px;
  color: var(--accent-ink);
}

/* Quiet text buttons: no fill, no border, just a label that gains an underline on hover. */
.composer-quiet {
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--radius-chip);
  min-height: 32px;
  padding: 0 8px;
  cursor: pointer;
}
.composer-quiet:hover { color: var(--text); text-decoration: underline; }
.composer-quiet:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Attach buttons: ghost buttons, 32px tall, with a 16px outline icon. */
.composer-attach { display: flex; flex-wrap: wrap; gap: 8px; }
.composer-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: var(--fs-small); font-weight: 500; color: var(--text);
  background: none; border: 1px solid var(--control); border-radius: var(--radius-control);
  min-height: 32px; padding: 0 12px; cursor: pointer;
}
.composer-ghost:hover { background: var(--active); }
.composer-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.composer-photo { align-items: center; gap: 8px; }
.composer-photo img { max-height: 72px; border-radius: var(--radius-control); border: 1px solid var(--border); }

.composer-audience { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.composer-audience label { font-weight: 600; }
.composer-audience select {
  font-family: var(--font);
  font-size: var(--fs-small);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--control);
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: 0 12px;
  max-width: 100%;
  flex: 1 1 180px;
}
.composer-audience select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.composer-summary { margin: -4px 0 0; color: var(--muted); font-size: var(--fs-small); }
.composer-summary:empty { display: none; }

.composer-crossposts { display: flex; flex-direction: column; gap: 4px; }
.composer-crossposts:empty { display: none; }
.composer-crosspost { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.composer-crosspost label { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.composer-crosspost input { accent-color: var(--primary); width: 16px; height: 16px; }
.composer-crosspost.is-disabled { color: var(--muted); }
.composer-crosspost.is-disabled label { cursor: not-allowed; }

.composer-footer { display: flex; justify-content: flex-end; }
.composer-post {
  font-family: var(--font);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--surface);
  background: var(--primary);
  border: 0;
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: 0 24px;
  cursor: pointer;
}
.composer-post:hover { opacity: 0.88; }
.composer-post:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The dialog: centred card on desktop, a full-screen sheet on the phone. The native <dialog>
   supplies the focus trap, Escape and focus return. */
.composer-dialog {
  padding: 0; border: 0; background: none; color: var(--text); overflow: visible;
  width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px);
}
.composer-dialog::backdrop { background: color-mix(in srgb, var(--text) 45%, transparent); }
.composer-dialog .composer-card {
  border-radius: var(--radius-card); max-height: calc(100dvh - 32px); overflow-y: auto;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--text) 28%, transparent); /* taste-skill-ignore: floats */
}
.composer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.composer-head h2 { margin: 0; font-size: var(--fs-section); font-weight: 600; letter-spacing: -0.01em; }

.draft-hint { font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }

@media (max-width: 980px) {
  .composer-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: none; margin: 0; }
  .composer-dialog .composer-card {
    height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: none; /* taste-skill-ignore: floats */
    padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  }
  .draft-hint { display: none; }
}

/* Attached media: a wrapping row of square thumbnails, each with its own progress or error. */
.composer-media {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
}
.composer-media[hidden] { display: none; }
.composer-media-item { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.composer-media-frame {
  aspect-ratio: 1; overflow: hidden; background: var(--raised);
  border: 1px solid var(--border); border-radius: var(--radius-control);
}
.composer-media-frame img, .composer-media-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.composer-media-item[data-status="uploading"] .composer-media-frame { opacity: 0.6; }
.composer-media-progress { width: 100%; height: 4px; accent-color: var(--accent); }
.composer-media-error { margin: 0; font-size: var(--fs-small); line-height: 1.3; color: var(--negative); }
/* A failed file keeps its square and says why inside it. */
.composer-media-item[data-status="error"] .composer-media-error {
  position: absolute; inset: 0; box-sizing: border-box; padding: 8px 36px 8px 8px;
  display: flex; align-items: center; overflow-wrap: anywhere;
  background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-control);
}
.composer-media-remove {
  position: absolute; top: 4px; right: 4px; width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--surface); background: var(--primary); border: 0; border-radius: 50%; cursor: pointer;
}
.composer-media-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.composer-media-note { margin: 0; color: var(--muted); font-size: var(--fs-small); }
.composer-media-note[hidden] { display: none; }
.composer-post:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 980px) {
  /* 44px touch targets; the visible disc stays 32px via the inset border. */
  .composer-media-remove { width: 44px; height: 44px; top: 0; right: 0; background: none; }
  .composer-media-remove .icon { box-sizing: content-box; padding: 8px; background: var(--primary); border-radius: 50%; }
}