/* Local form and shared-dialog skin only. The stage owns all page layout. */
.interaction-dialog {
  --ui-ink: #e8dfd1;
  --ui-paper: #211c22;
  --ui-gold: #b39b78;
  --ui-muted: #c3b7aa;
  box-sizing: border-box;
  inline-size: min(760px, calc(100% - 64px));
  max-inline-size: none;
  max-block-size: calc(100vh - 64px);
  max-block-size: calc(100dvh - 64px);
  margin: auto;
  padding: 48px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid rgb(179 155 120 / 38%);
  border-radius: 0;
  color: var(--ui-ink);
  background: var(--ui-paper);
  font: inherit;
  text-align: start;
  color-scheme: dark;
}

.interaction-dialog[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-content: start;
}

.interaction-dialog::backdrop { background: rgb(12 10 14 / 80%); }
.interaction-dialog *, .interaction-dialog *::before, .interaction-dialog *::after { box-sizing: border-box; }
.interaction-dialog > :not(.interaction-dialog__title, .interaction-dialog__close) { grid-column: 1 / -1; }
.interaction-dialog p, .interaction-dialog h2, .interaction-dialog h3 { overflow-wrap: anywhere; }

.interaction-dialog__title {
  grid-column: 1;
  grid-row: 1;
  min-inline-size: 0;
  margin: 0 0 36px;
  font-family: inherit;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .035em;
}

.interaction-button {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: 12px 0;
  border: 0;
  border-block-end: 1px solid rgb(179 155 120 / 70%);
  border-radius: 0;
  color: var(--ui-ink);
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
}
.interaction-button:disabled { opacity: .55; cursor: wait; }
.interaction-button:not(:disabled):active { color: var(--ui-gold); }

.interaction-dialog__close {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  inset-block-start: 0;
  align-self: start;
  margin-block-start: -5px;
  padding: 10px 4px;
  border: 0;
  background: var(--ui-paper);
  color: var(--ui-muted);
  text-align: center;
  z-index: 1;
}

.interaction-dialog :is(button, input, textarea, select, a):focus-visible,
[data-wish-input]:focus-visible,
[data-next-wish]:focus-visible,
[data-action="wish-skip"]:focus-visible,
[data-action="wish-clear"]:focus-visible {
  outline: 2px solid #b39b78;
  outline-offset: 4px;
}
.interaction-dialog__title:focus { outline: none; }

.interaction-search__label, .interaction-consult__label {
  display: block;
  min-inline-size: 0;
  color: var(--ui-muted);
  font-size: 13px;
  line-height: 1.8;
  letter-spacing: .025em;
}
.interaction-search__input, .interaction-consult__input,
.interaction-search__filter select {
  box-sizing: border-box;
  min-inline-size: 0;
  max-inline-size: 100%;
  min-block-size: 48px;
  border: 0;
  border-block-end: 1px solid rgb(179 155 120 / 60%);
  border-radius: 0;
  color: var(--ui-ink);
  background: var(--ui-paper);
  font: inherit;
  font-size: 16px;
  line-height: 1.7;
}
.interaction-search__input {
  display: block;
  inline-size: 100%;
  margin-block-start: 8px;
  padding: 12px 0;
}
.interaction-search__input::placeholder, .interaction-consult__input::placeholder { color: #b3a69b; opacity: 1; }
.interaction-search__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-block: 24px 4px;
  color: var(--ui-muted);
  font-size: 13px;
}
.interaction-search__filter select { padding: 8px 24px 8px 0; }
.interaction-search__count, .interaction-consult__count {
  margin-block: 20px;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.8;
}
.interaction-result-list { margin: 0; padding: 0; list-style: none; }
.interaction-result-item { border-block-start: 1px solid rgb(179 155 120 / 22%); }
.interaction-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  inline-size: 100%;
  min-block-size: 76px;
  padding: 20px 0;
  border: 0;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.interaction-result__number { color: var(--ui-gold); font-size: 12px; font-variant-numeric: tabular-nums; }
.interaction-result__name { font-size: 16px; }
.interaction-result__series { color: var(--ui-muted); font-size: 12px; }
.interaction-result:not(:has(.interaction-result__number)) { display: block; }
.interaction-search__heading { margin: 36px 0 18px; font-size: 16px; font-weight: 400; }
.interaction-search__empty { margin: 28px 0 12px; color: var(--ui-muted); font-size: 15px; line-height: 1.9; }

.interaction-content { min-inline-size: 0; }
.interaction-product p, .interaction-article p, .interaction-consult p {
  margin-block: 0 24px;
  font-size: 15px;
  line-height: 1.95;
}
.interaction-product .interaction-product__series {
  margin-block-end: 12px;
  color: var(--ui-gold);
  font-size: 13px;
  letter-spacing: .035em;
}
.interaction-product .interaction-product__english {
  margin-block-end: 36px;
  color: var(--ui-muted);
  font-size: 14px;
  letter-spacing: .07em;
}
.interaction-product .interaction-product__lead,
.interaction-article .interaction-article__lead { font-size: 18px; line-height: 1.85; }
.interaction-product .interaction-product__note,
.interaction-product .interaction-product__guidance { color: var(--ui-muted); font-size: 13px; }
.interaction-product .interaction-product__guidance {
  margin-block-start: 32px;
  padding-block-start: 24px;
  border-block-start: 1px solid rgb(179 155 120 / 25%);
}
.interaction-product > .interaction-button { margin-block: 12px 8px; }
.interaction-article__section { margin-block-start: 36px; }
.interaction-article__section h3 { margin: 0 0 14px; font-size: 17px; line-height: 1.6; font-weight: 400; }
.interaction-article__section p { color: var(--ui-muted); }
.interaction-consult .interaction-consult__lead { margin-block-end: 32px; }
.interaction-consult .interaction-consult__product { color: var(--ui-gold); font-size: 14px; }
.interaction-consult__input {
  display: block;
  inline-size: 100%;
  min-block-size: 160px;
  max-block-size: 320px;
  margin-block-start: 10px;
  padding: 14px 0;
  resize: vertical;
  overflow: auto;
}
.interaction-consult .interaction-consult__count { margin-block: 10px 24px; font-size: 12px; }
.interaction-consult .interaction-consult__status { margin-block: 20px 0; font-size: 14px; }
.interaction-consult__status:empty { display: none; }
.interaction-consult .interaction-consult__boundary { margin-block: 36px 0; color: var(--ui-muted); font-size: 12px; }

[data-wish-input] {
  box-sizing: border-box;
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 112px;
  max-block-size: 220px;
  padding: 16px 0;
  border: 0;
  border-block-end: 1px solid rgb(179 155 120 / 70%);
  border-radius: 0;
  color: #e8dfd1;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 1.85;
  resize: vertical;
  overflow: auto;
  color-scheme: dark;
}
[data-wish-input]::placeholder { color: #c3b7aa; opacity: 1; }
[data-wish-count], [data-wish-status] { color: #c3b7aa; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
[data-wish-count] { font-variant-numeric: tabular-nums; }
[data-next-wish], [data-action="wish-skip"], [data-action="wish-clear"] { min-block-size: 44px; min-inline-size: 44px; touch-action: manipulation; }

@media (hover: hover) {
  .interaction-button:not(:disabled):hover { color: var(--ui-gold); }
  .interaction-result:hover .interaction-result__name { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
}

@media (max-width: 640px) {
  .interaction-dialog {
    inline-size: calc(100% - 32px);
    max-block-size: calc(100vh - 32px);
    max-block-size: calc(100dvh - 32px);
    padding: 28px 22px;
    scrollbar-gutter: auto;
  }
  .interaction-dialog[open] { column-gap: 12px; }
  .interaction-dialog__title { margin-block-end: 28px; font-size: 25px; }
  .interaction-dialog__close { margin-inline-end: -6px; }
  .interaction-dialog :is(input, textarea, select) { font-size: 16px; }
  .interaction-result { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px; min-block-size: 84px; padding-block: 18px; }
  .interaction-result__series { grid-column: 2; }
  .interaction-result__name { font-size: 15px; }
  .interaction-product .interaction-product__lead, .interaction-article .interaction-article__lead { font-size: 17px; }
  .interaction-product p, .interaction-article p, .interaction-consult p { line-height: 1.85; }
  .interaction-consult__input { min-block-size: 144px; }
  [data-wish-input] { font-size: 16px; resize: none; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .interaction-dialog { max-block-size: calc(100dvh - 24px); padding-block: 20px; }
  .interaction-dialog__title { margin-block-end: 20px; }
  .interaction-consult__input { min-block-size: 100px; }
}