/* Masterpieces — list, view, editor.
 * Layered on top of journal.css (we share entry-card / editor-form / tag-chip).
 */

.page-subtitle {
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
  color: var(--color-muted);
  font-style: italic;
}

/* ── Filter bar ────────────────────────────────────────── */

.mp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.mp-filters__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  text-transform: uppercase;
}

.mp-filters__field--grow {
  flex: 1 1 240px;
}

.mp-filters__field input,
.mp-filters__field select {
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: 1rem; /* ≥16px so iOS Safari doesn't zoom on focus */
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  min-width: 160px;
}

.mp-filters__field input:focus,
.mp-filters__field select:focus {
  outline: none;
  border-color: var(--color-primary-soft);
  box-shadow: 0 0 0 3px rgba(74, 124, 168, 0.15);
}

.mp-filters__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-left: auto;
}

.mp-summary {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

/* ── List grid ─────────────────────────────────────────── */

.mp-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.mp-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary-soft);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--duration-fast) var(--ease-soft),
              transform var(--duration-fast) var(--ease-soft);
}

.mp-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.mp-card--love_letter   { border-top-color: var(--color-accent); }
.mp-card--html_artifact { border-top-color: var(--color-primary); }
.mp-card--memory_note   { border-top-color: #b58a4a; }
.mp-card--task_doc      { border-top-color: var(--color-success); }
.mp-card--other         { border-top-color: var(--color-muted); }

.mp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mp-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.25;
}

.mp-card__date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-muted);
}

.mp-card__preview {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text);
  font-style: italic;
  line-height: 1.5;
}

.mp-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: auto;
}

/* ── Type chips ────────────────────────────────────────── */

.mp-type {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  background: var(--color-bg-soft);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}

.mp-type--love_letter   { background: #fbeaea; color: #8e3a3a; border-color: #ecc8c8; }
.mp-type--html_artifact { background: #e3eef6; color: #245581; border-color: #cdddec; }
.mp-type--memory_note   { background: #f5ecd9; color: #6c5a2c; border-color: #d8c79b; }
.mp-type--task_doc      { background: #e0efe5; color: #2e6447; border-color: #c6dfd0; }
.mp-type--other         { background: #f0ede5; color: #6a6a6a; }

/* ── View page ─────────────────────────────────────────── */

.mp-view__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* #85 — author attribution chip in the meta row. */
.mp-view__author { display: inline-flex; align-items: center; gap: 0.35em; }
.mp-view__author-label { color: var(--color-muted); }
.mp-view__author-chip {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
}
.mp-view__author-instance {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
}

.mp-view__title {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--color-primary);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

.mp-view__preview {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--color-text);
  margin: 0 0 var(--space-5);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
}

.mp-view__body {
  margin: var(--space-5) 0;
  line-height: 1.7;
}

.mp-view__body p { margin: 0 0 var(--space-3); }
.mp-view__body h2 { font-family: var(--font-display); color: var(--color-primary); margin-top: var(--space-5); }
.mp-view__body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* Iframe for html_artifact pieces */
.mp-view__artifact {
  margin: var(--space-5) 0;
}

.mp-view__iframe {
  width: 100%;
  min-height: 80vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  display: block;
}

.mp-view__iframe-hint {
  margin: var(--space-2) 0 0;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: right;
}

.mp-view__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.mp-view__actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ── Editor extras ─────────────────────────────────────── */

.editor-form textarea#raw-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 1rem; /* ≥16px so iOS Safari doesn't zoom on focus */
  line-height: 1.5;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-soft);
  resize: vertical;
  min-height: 320px;
}

.form-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: var(--space-1);
  font-style: italic;
}

/* ── Response layer (#13): reactions + append-only marginalia ───────── */

.mp-responses {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* Reactions bar */
.mp-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.mp-reaction {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  font-size: 0.9rem;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.mp-reaction:hover { border-color: var(--color-primary-soft); }

.mp-reaction.is-mine {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: var(--color-primary-soft);
}

.mp-reaction__count { color: var(--color-muted); font-size: 0.82rem; }

.mp-reaction--add { color: var(--color-muted); }

/* Response stream */
.mp-responses__heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-4);
}

.mp-responses__list { display: flex; flex-direction: column; gap: var(--space-4); }

.mp-responses__empty {
  color: var(--color-muted);
  font-style: italic;
  font-family: var(--font-body);
}

.mp-response { display: flex; gap: var(--space-3); }

.mp-response__avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
}
.mp-response__avatar.has-emoji { font-size: 1.05rem; }

.mp-response__main { flex: 1 1 auto; min-width: 0; }

.mp-response__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: 2px;
}

.mp-response__name { font-weight: 700; color: var(--color-text); font-size: 0.92rem; }

.mp-response__instance {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted);
}

.mp-response__time { font-size: 0.75rem; color: var(--color-muted); margin-left: auto; }

.mp-response__body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.55;
  word-wrap: break-word;
}
.mp-response__body p { margin: 0 0 var(--space-2); }
.mp-response__body p:last-child { margin-bottom: 0; }

/* Composer */
.mp-compose { margin-top: var(--space-6); }

.mp-compose__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem; /* ≥16px so iOS Safari doesn't zoom on focus */
  line-height: 1.5;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  resize: vertical;
  min-height: 52px;
}
.mp-compose__input:focus { outline: none; border-color: var(--color-primary-soft); }

.mp-compose__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.mp-compose__hint { font-size: 0.78rem; color: var(--color-muted); font-style: italic; }

/* ── TASK_051 slice 5b — visibility / arming control ────────────────────── */
.visibility-control {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
}
.visibility-control > legend {
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 var(--space-2);
}
.acl-hint { margin: var(--space-2) 0; color: var(--color-muted); font-size: 0.9rem; }
.acl-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}
.acl-item { display: flex; align-items: center; gap: 0.5em; font-size: 0.95rem; }
.acl-item input[disabled] + span { color: var(--color-muted); }
.effective-readset {
  margin: var(--space-2) 0 0;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-text);
  font-size: 0.9rem;
}
.visibility-status { color: var(--color-error); font-size: 0.9rem; min-height: 1.2em; }

/* ── TASK_051 — visibility chip on the masterpiece view ─────────────────── */
.task-visibility {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.task-visibility--family {
  background: var(--color-bg-soft);
  color: var(--color-muted);
  border: 1px solid var(--color-border);
}
.task-visibility--restricted { background: #fdf0e3; color: #9a5b1e; }
.task-visibility--public { background: #e6f0fa; color: #2b6098; }

/* ── Task-parity metadata block (Created / Updated / Visibility) ─────────── */
.mp-view__props {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.mp-view__props > div { margin: 0; }
.mp-view__props dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  margin-bottom: 2px;
}
.mp-view__props dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
}
.mp-view__when { color: var(--color-muted); font-size: 0.9rem; }
.mp-view__sep { color: var(--color-muted); }

/* ── Attachments (shared tile styles live in components.css) ─────────────── */
.mp-view__attachments {
  margin: var(--space-5) 0 var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.mp-view__attachments-heading {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
}
.mp-view__attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

/* ── Upload control (net-new: masterpiece-only web upload) ───────────────── */
.mp-view__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: var(--space-3) 0;
}
.mp-view__upload-label {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: 0.85rem;
  color: var(--color-muted);
}
.mp-view__upload-hint { font-size: 0.78rem; color: var(--color-muted); }
.mp-view__upload-status { font-size: 0.85rem; color: var(--color-accent); }