/* Authored dossier and contribution controls. Game data and native form semantics stay intact. */
dialog {
  --dialog-padding: 1.5rem;
  width: min(760px, calc(100vw - 2rem));
  max-height: 88dvh;
  padding: var(--dialog-padding);
  border: 1px solid #3d414b;
  border-radius: 12px;
  background: #14161c;
  color: #f2f0f0;
  box-shadow: 0 24px 70px #0008;
  scrollbar-width: thin;
  scrollbar-color: #50545f #14161c;
  overscroll-behavior: contain;
}

dialog::backdrop { background: #030408bf; backdrop-filter: blur(6px); }
dialog .dialog-top {
  position: sticky;
  top: calc(-1 * var(--dialog-padding));
  z-index: 3;
  min-height: 72px;
  margin: calc(-1 * var(--dialog-padding)) calc(-1 * var(--dialog-padding)) 1.5rem;
  padding: .85rem var(--dialog-padding);
  gap: 1rem;
  background: #14161c;
  border-bottom: 1px solid #2d3038;
}

dialog .dialog-top h2 {
  margin: 0;
  color: #f2f0f0;
  font-size: 1.12rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .01em;
}

dialog .dialog-top .section-label { font-size: .72rem; letter-spacing: .16em; color: #a1a4af; }
dialog .close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid #2d3038;
  border-radius: 6px;
  background: #1a1d24;
  color: #c2c4cc;
  font: 1.6rem/1 var(--font);
}

dialog .close:hover:enabled { border-color: #7f3944; background: #322028; color: #fff; }
dialog :is(button, input, textarea, summary, a):focus-visible {
  outline: 2px solid #f16c7b;
  outline-offset: 3px;
}
dialog #detail-title:focus { outline: 2px solid #f16c7b; outline-offset: 5px; border-radius: 3px; }
dialog > .fineprint { margin: -.15rem 0 1.4rem; line-height: 1.75; }
dialog .fineprint { color: #a1a4af; }
dialog p { color: #c5c7cf; }
dialog a { color: #f18b98; text-underline-offset: .2em; }
dialog a:hover { color: #ffb4be; }
#detail-content > .record-heading { margin: .2rem 0 1.4rem; }
#detail-content > .record-heading h3,
#detail-content > h3 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 650; line-height: 1.4; }
#detail-content h4 { margin: 1.6rem 0 .75rem; color: #dedfe4; font-size: .9rem; font-weight: 650; letter-spacing: .02em; }
#detail-content > .record-heading .secondary-name { color: #a1a4af; }
#detail-content > p { font-size: .96rem; line-height: 1.85; color: #c5c7cf; }
dialog .form-grid { gap: 1rem; }
dialog form label {
  gap: .5rem;
  margin: 0 0 1rem;
  color: #b8bbc6;
  font-size: .84rem;
  line-height: 1.5;
}

dialog .form-grid > label { margin-bottom: 0; }
dialog form label > span:first-child { font-weight: 550; }
dialog form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea) {
  appearance: none;
  width: 100%;
  min-height: 46px;
  height: auto;
  padding: .72rem .85rem;
  border: 1px solid #3c404a;
  border-radius: 6px;
  background: #0e1015;
  color: #f2f0f0;
  font: inherit;
  font-size: .93rem;
  line-height: 1.55;
  outline: none;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}

dialog form textarea { min-height: 112px; resize: vertical; }
dialog form :is(input:not([type="checkbox"]):not([type="radio"]), textarea):hover:enabled { border-color: #626673; }
dialog form :is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus-visible {
  border-color: #dd4658;
  background: #11131a;
  box-shadow: 0 0 0 3px #dd465822;
  outline: 2px solid #f16c7b;
  outline-offset: 2px;
}

dialog form :is(input, textarea)::placeholder { color: #8d929f; opacity: 1; }
dialog form :is(input, textarea):disabled { color: #a1a4af; background: #101218; border-color: #2d3038; cursor: not-allowed; opacity: .75; }
dialog form :is(input, textarea):user-invalid { border-color: #e97684; }
dialog form fieldset {
  min-width: 0;
  margin: .25rem 0;
  padding: 1rem;
  border: 1px solid #343843;
  border-radius: 8px;
  background: #101218;
}

dialog form legend { padding: 0 .5rem; color: #c5c7cf; font-size: .84rem; font-weight: 550; }
#build-form fieldset .form-grid label > span:first-child { color: #ee8894; font: .74rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
dialog form > .primary,
dialog .contribution-actions > button,
dialog .vote-row > button,
dialog .description-retry,
dialog #reload-perk-tags,
dialog #add-post-reference,
dialog #view-current-build {
  min-height: 44px;
  border-radius: 6px;
  padding: .65rem 1rem;
  border: 1px solid #3c404a;
  background: #1c1f27;
  color: #f2f0f0;
  font-size: .88rem;
  line-height: 1.5;
}

dialog form > .primary, dialog #view-current-build { border-color: #c84050; background: #a52f40; font-weight: 600; }
dialog form > .primary:hover:enabled, dialog #view-current-build:hover:enabled { background: #bc3b4c; border-color: #ec7382; }
dialog :is(.contribution-actions, .vote-row) > button:hover:enabled,
dialog :is(.description-retry, #reload-perk-tags, #add-post-reference):hover:enabled { border-color: #8c434e; background: #322029; }
dialog form > .primary:disabled { opacity: .55; }
dialog .form-feedback {
  margin: .85rem 0;
  padding: .75rem .85rem;
  border: 1px solid #705039;
  border-radius: 6px;
  background: #33261f;
  color: #f1c390;
  line-height: 1.7;
}

dialog .form-feedback:empty { display: none; }
dialog .form-feedback button { margin: .6rem 0 0; }
dialog :is(#comment-form, #post-reply-form) {
  margin-top: 1.25rem;
  padding: 1.15rem;
  border: 1px solid #2d3038;
  border-radius: 8px;
  background: #101218;
}

dialog :is(#comment-form, #post-reply-form) > label { margin-bottom: .65rem; color: #dedfe4; font-weight: 600; }
dialog :is(#comment-form, #post-reply-form) > textarea { margin-bottom: .85rem; }
dialog .contribution-actions { gap: .6rem; margin: 1.5rem 0 1rem; }
dialog .vote-row {
  gap: .6rem;
  padding: .85rem;
  margin: 1.5rem 0 .75rem;
  border: 1px solid #2d3038;
  border-radius: 8px;
  background: #101218;
}

dialog .vote-row > button[aria-pressed="true"] { border-color: #d54b5d; background: #3b202b; color: #ffbcc5; }
dialog .vote-row > span { color: #c8cbd4; font-size: .82rem; }
dialog .comment {
  padding: 1rem 1.1rem;
  margin: .65rem 0;
  border: 1px solid #2d3038;
  border-radius: 8px;
  background: #1a1c23;
}

dialog .comment strong { color: #ecebf0; font-weight: 600; }
dialog .comment > span { color: #a1a4af; }
dialog .comment p { color: #c5c7cf; line-height: 1.75; }
dialog .wiki-revisions { padding-top: .25rem; }
dialog :is(.post-reference, .reference-editor-chip) { border-radius: 6px; border-color: #4e3540; background: #271b23; color: #e8c4cc; }
dialog .post-reference { min-height: 44px; display: inline-flex; align-items: center; padding: .6rem .75rem; font-size: .82rem; }
dialog .reference-editor-chip { padding: .4rem .75rem; gap: .75rem; }
dialog .reference-editor-chip button { min-height: 44px; padding: .5rem .7rem; border-radius: 6px; color: #f08b99; }
dialog :is(.archive-details, .usage-details, .revision-history) {
  margin-top: 1.4rem;
  border: 1px solid #2d3038;
  border-radius: 8px;
  background: #101218;
  padding: 0 1rem;
}

dialog :is(.archive-details, .usage-details, .revision-history, .perk-tag-editor) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding: .8rem .1rem;
  color: #b9bdc8;
  font-size: .83rem;
  font-weight: 550;
  line-height: 1.6;
  list-style: none;
  cursor: pointer;
}

dialog :is(.archive-details, .usage-details, .revision-history, .perk-tag-editor) > summary::-webkit-details-marker { display: none; }
dialog :is(.archive-details, .usage-details, .revision-history, .perk-tag-editor) > summary::after {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: .3rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s;
}

dialog :is(.archive-details, .usage-details, .revision-history, .perk-tag-editor)[open] > summary { color: #f18b98; }
dialog :is(.archive-details, .usage-details, .revision-history, .perk-tag-editor)[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
dialog :is(.archive-details, .usage-details, .revision-history, .perk-tag-editor) > summary:hover { color: #f2f0f0; }
dialog :is(.archive-details, .usage-details, .revision-history)[open] { padding-bottom: .7rem; }
dialog .archive-details .fact-table { margin: .5rem 0; }
dialog .archive-details .fact-table th { color: #a1a4af; }
dialog .archive-details .fact-table td { color: #c5c7cf; }
dialog .archive-details .fact-table :is(th, td) { border-bottom-color: #2d3038; }
dialog .archive-details .fact-table tr:nth-child(even) { background: #191c2455; }
dialog .record-status { gap: .5rem; }
dialog :is(.source-status, .mechanics-status, .status) { border-radius: 4px; padding: .2rem .55rem; line-height: 1.6; }
dialog .description-text { line-height: 1.85; color: #d6d8df; }
dialog .character-story { margin: 1.4rem 0; padding: .1rem 1.15rem 1rem; border-left: 2px solid #9b3343; border-radius: 0 8px 8px 0; background: #251a23; }
dialog .description-tiers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: .3rem;
  margin: .4rem 0 .75rem;
  border: 1px solid #2d3038;
  border-radius: 8px;
  background: #0e1015;
}

dialog .description-tier { min-height: 44px; border: 1px solid transparent; border-radius: 6px; padding: .55rem .9rem; background: transparent; color: #a1a4af; font-size: .85rem; }
dialog .description-tier:hover:enabled { background: #24212a; color: #f2f0f0; border-color: transparent; }
dialog .description-tier[aria-pressed="true"] { background: #3a202b; border-color: #8c3b4b; color: #ffc0c9; }
dialog .perk-tag-panel { padding: 1rem; margin: 1.4rem 0; border: 1px solid #2d3038; border-radius: 8px; background: #101218; }
dialog .perk-tag-panel > h4 { margin: .1rem 0 .75rem !important; }
dialog .perk-tag-panel > .tags { gap: .45rem; }
dialog .perk-tag-panel .tag { border-radius: 4px; background: #232630; border-color: #3d424e; color: #c5c9d3; padding: .2rem .55rem; }
dialog .perk-tag-panel .perk-tag-editor { border-top: 1px solid #2d3038; margin-top: 1rem; }
dialog .perk-tag-editor > summary { color: #ef8895; }
dialog .tag-choices {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  padding: .7rem;
  margin: .75rem 0 1rem;
  border: 1px solid #2d3038;
  border-radius: 8px;
  background: #0c0e13;
}

dialog .tag-choices label {
  display: flex;
  align-items: center;
  min-height: 46px;
  margin: 0;
  padding: .55rem .6rem;
  gap: .6rem;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #bfc3cd;
  font-size: .8rem;
  line-height: 1.5;
  transition: border-color .16s, background-color .16s;
}

dialog .tag-choices label:hover { background: #1e212a; border-color: #414653; }
dialog .tag-choices label:has(input:checked) { background: #35212b; border-color: #85404e; color: #ffd0d6; }
dialog .tag-choices label:has(input:focus-visible) { outline: 2px solid #f16c7b; outline-offset: 2px; }
dialog .tag-choices input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid #6a6f7f;
  border-radius: 4px;
  background: #0e1016;
  cursor: pointer;
  opacity: 1;
}

dialog .tag-choices input[type="checkbox"]::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); }
dialog .tag-choices input[type="checkbox"]:checked { background: #bb3548; border-color: #ee7383; }
dialog .tag-choices input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
dialog .tag-choices input[type="checkbox"]:focus-visible { outline: none; }
dialog .tag-choices label:has(input:disabled) { cursor: not-allowed; opacity: .7; }
dialog .tag-choices input[type="checkbox"]:disabled { cursor: not-allowed; }
#perk-tag-form > label { margin: .85rem 0 .45rem; color: #b8bbc6; font-size: .84rem; }
#perk-tag-form > input { margin: 0 0 1rem; }

@media (max-width: 600px) {
  dialog { --dialog-padding: 1rem; width: calc(100vw - 1.25rem); max-height: 92dvh; }
  dialog .dialog-top { min-height: 66px; margin-bottom: 1.1rem; padding-top: .65rem; padding-bottom: .65rem; }
  dialog .dialog-top .section-label { font-size: .68rem; letter-spacing: .1em; }
  dialog .dialog-top h2 { font-size: 1rem; }
  dialog form :is(input:not([type="checkbox"]):not([type="radio"]), textarea) { font-size: 1rem; }
  dialog .form-grid { gap: .9rem; }
  dialog form fieldset { padding: .85rem; }
  dialog .tag-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; padding: .5rem; }
  dialog .tag-choices label { padding: .5rem; gap: .5rem; }
  dialog .perk-tag-panel { padding: .8rem; }
  dialog :is(#comment-form, #post-reply-form) { padding: .9rem; }
  dialog .vote-row { padding: .65rem; gap: .45rem; }
  dialog .vote-row > span { flex-basis: 100%; margin: .1rem .1rem 0; }
  dialog .description-tiers { display: flex; }
  dialog .description-tier { flex: 1; padding: .5rem .65rem; }
  dialog .reference-editor-chip { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  dialog .form-grid { grid-template-columns: 1fr; }
  dialog .form-grid .full { grid-column: 1; }
  dialog form > .primary { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  dialog *, dialog *::after { transition: none; }
  dialog::backdrop { backdrop-filter: none; }
}

@media (forced-colors: active) {
  dialog .tag-choices input[type="checkbox"] { border-color: ButtonText; }
  dialog .tag-choices input[type="checkbox"]:checked { forced-color-adjust: none; background: Highlight; border-color: Highlight; }
  dialog .tag-choices input[type="checkbox"]:checked::after { border-color: HighlightText; }
  dialog .tag-choices label:has(input:checked) { outline: 1px solid Highlight; }
}