/* A character's detail: header, identity, portraits, the field sections,
   relationships, the two-step delete. */

.dr-detail-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--chrome-h);
  padding: 0 var(--space-2) 0 var(--space-4);
  border-bottom: 1px solid var(--color-popover-border);
}
.dr-detail-back { display: none; }
.dr-save { margin-right: auto; font-size: var(--text-ui); color: var(--color-text-dimmer); }
.dr-save[data-state='error'] { color: var(--color-danger); }

.dr-detail-identity { display: flex; gap: var(--space-4); padding: var(--space-6) var(--space-4) var(--space-4); }
.dr-detail-portrait { flex: none; width: var(--detail-portrait); height: var(--detail-portrait); border-radius: var(--radius-card); object-fit: cover; }
.dr-detail-portrait.dr-monogram { font-size: var(--text-title); }
.dr-detail-names { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; flex: 1 1 auto; }
.dr-name-input {
  height: auto;
  padding: 0 var(--space-1);
  margin-left: calc(-1 * var(--space-1));
  border-color: transparent;
  background: transparent;
  font-size: var(--text-title);
  line-height: var(--lh-title);
}
.dr-name-input:hover { border-color: var(--color-popover-border); }

.dr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.dr-tag-input { width: calc(2 * var(--space-16)); height: var(--chip-h); border-style: dashed; border-radius: var(--radius-pill); font-size: var(--text-small); }

.dr-detail-section { padding: var(--space-4); border-top: 1px solid var(--color-popover-border); }
.dr-section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-ui);
  line-height: var(--lh-ui);
  font-weight: 400;
  color: var(--color-text-dimmer);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dr-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-3); align-items: center; }
.dr-form-row { display: contents; }
.dr-form-label { font-size: var(--text-small); color: var(--color-text-dim); }
.dr-form-row[data-wide='true'] > .dr-form-label { grid-column: 1 / -1; margin-top: var(--space-2); }
.dr-form-row[data-wide='true'] > .dr-input { grid-column: 1 / -1; }

.dr-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-height: var(--control-h); }
.dr-swatch {
  width: var(--swatch);
  height: var(--swatch);
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: inset 0 0 0 1px var(--color-popover-border);
}
.dr-swatch[aria-checked='true'] { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 var(--swatch-ring) var(--color-text); }
/* The color saved now (any hex, as the old UI stored it), set apart from the choices. */
.dr-swatch-stored { margin-right: var(--space-2); }
.dr-swatch-none { background: transparent; box-shadow: inset 0 0 0 1px var(--color-text-dimmer); position: relative; }
.dr-swatch-none::after { content: ''; position: absolute; inset: 50% 2px auto; height: 1px; background: var(--color-text-dimmer); rotate: -45deg; }
.dr-swatch-custom { position: relative; background: conic-gradient(var(--color-cat-red), var(--color-cat-yellow), var(--color-cat-green), var(--color-cat-teal), var(--color-cat-blue), var(--color-cat-purple), var(--color-cat-pink), var(--color-cat-red)); cursor: pointer; }
.dr-swatch-custom:focus-within { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 var(--swatch-ring) var(--color-accent); }
.dr-swatch-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.dr-swatch-none[aria-checked='true'] { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 var(--swatch-ring) var(--color-text); }

.dr-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dr-thumb { position: relative; margin: 0; width: var(--thumb); height: var(--thumb); border-radius: var(--radius-control); overflow: hidden; }
.dr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-thumb[data-primary='true'] { box-shadow: 0 0 0 2px var(--color-accent); }
.dr-thumb-primary, .dr-thumb-make { position: absolute; right: var(--space-1); bottom: var(--space-1); display: inline-flex; padding: 1px; border-radius: 50%; background: var(--color-popover); color: var(--color-accent); }
.dr-thumb-primary .bt-duo-tint { opacity: 1; }
.dr-thumb-make { color: var(--color-text-dimmer); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.dr-thumb:hover .dr-thumb-make, .dr-thumb-make:focus-visible { opacity: 1; }
.dr-thumb-remove { position: absolute; top: var(--space-1); right: var(--space-1); display: inline-flex; padding: 1px; border-radius: 50%; background: var(--color-popover); color: var(--color-text-dim); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.dr-thumb:hover .dr-thumb-remove, .dr-thumb-remove:focus-visible { opacity: 1; }
.dr-thumb-remove:hover { color: var(--color-danger); }
@media (hover: none) { .dr-thumb-make, .dr-thumb-remove { opacity: 1; } }
.dr-thumb-add { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--color-popover-border); color: var(--color-text-dimmer); }
.dr-thumb-add[aria-busy='true'] { opacity: 0.5; }
.dr-thumb-add:hover { color: var(--color-text); border-color: var(--color-text-dimmer); }

.dr-ties { margin: 0 0 var(--space-2); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.dr-tie { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-small); }
.dr-tie-role { min-width: calc(2 * var(--space-16)); color: var(--color-text-dim); font-size: var(--text-small); }
.dr-tie-text { flex: 1 1 auto; min-width: 0; color: var(--color-text-dim); }
.dr-tie-role-button { color: var(--color-text); border-radius: var(--radius-control); padding: 0 var(--space-1); margin: 0 calc(-1 * var(--space-1)); }
.dr-tie-role-button:hover { background: var(--color-popover-hover); }
.dr-tie-remove { width: var(--control-h-small); height: var(--control-h-small); opacity: 0; }
.dr-tie:hover .dr-tie-remove, .dr-tie-remove:focus-visible { opacity: 1; }
@media (hover: none) { .dr-tie-remove { opacity: 1; } }
.dr-tie-hint { margin-top: var(--space-2); }
.dr-tie-editor { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; padding: var(--space-3); border: 1px solid var(--color-popover-border); border-radius: var(--radius-card); background: var(--color-popover); }
.dr-tie-sentence { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.dr-tie-is { color: var(--color-text-dim); font-size: var(--text-small); white-space: nowrap; }
.dr-tie-custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2) var(--space-3); }
.dr-tie-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dr-tie-field:last-child { grid-column: 1 / -1; }
.dr-tie-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

.dr-detail-danger { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }

@container app (max-width: 720px) {
  .dr-tie-sentence, .dr-tie-custom { grid-template-columns: minmax(0, 1fr); }
  .dr-detail-back { display: inline-flex; margin-left: calc(-1 * var(--space-2)); }
  .dr-detail-close { display: none; }
  .dr-form { grid-template-columns: minmax(0, 1fr); }
  .dr-form-label { margin-top: var(--space-2); }
}