.dai { max-width: 48rem; margin: 0 auto; }
.dai__form { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-1); }
@media (min-width: 48em) { .dai__form { padding: 1.75rem; } }
.dai__form .field textarea { min-height: 7.5rem; height: 7.5rem; font-size: 16px; line-height: 1.55; }
.dai__note { margin-top: .6rem; font-size: .8125rem; color: var(--muted); line-height: 1.5; }

.dai__tlds { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dai__tlds summary { display: inline-block; cursor: pointer; font-size: .875rem; font-weight: 700; color: var(--ink-2); list-style: none; }
.dai__tlds summary::-webkit-details-marker { display: none; }
.dai__tlds summary::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin: 0 .55rem .15rem .1rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: -webkit-transform .2s; transition: transform .2s; }
.dai__tlds[open] summary::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.dai__tlds summary:hover { color: var(--brand); }
.dai__tlds-count { font-weight: 600; color: var(--brand); }
.dai__tlds fieldset { margin: .75rem 0 0; padding: 0; border: 0; min-width: 0; }
.dai__tlds fieldset > p { margin-bottom: .6rem; font-size: .8125rem; color: var(--muted); }
.dai__tld-list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -.5rem -.5rem 0; }
.dai__tld { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; min-height: 2.5rem; margin: 0 .5rem .5rem 0; padding: 0 .8rem; border: 1px solid var(--line-2); border-radius: .5rem; background: #fff; font-size: .875rem; font-weight: 600; cursor: pointer; }
.dai__tld input { -webkit-flex: none; flex: none; width: 1rem; height: 1rem; margin: 0 .45rem 0 0; accent-color: var(--brand); }
.dai__tld:hover { border-color: var(--brand); }

.dai__actions { margin-top: 1.25rem; }
.dai__actions .btn { gap: 0; white-space: normal; text-align: center; line-height: 1.25; padding-top: .5rem; padding-bottom: .5rem; }
.dai__actions .btn .i { margin-right: .5rem; }
.dai__actions .btn[disabled] { opacity: .75; cursor: progress; }
.dai__actions .btn.is-busy .i { -webkit-animation: dai-pulse 1.1s ease-in-out infinite; animation: dai-pulse 1.1s ease-in-out infinite; }
@media (max-width: 29.99em) { .dai__actions .btn { width: 100%; } }
.dai__error { margin: 1rem 0 0; }
.dai__error[hidden] { display: none; }

.dai__result { margin-top: 1.75rem; scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.dai__result[hidden] { display: none; }
.dai__summary { margin-bottom: 1rem; font-size: 1rem; color: var(--ink-2); }
.dai__summary strong { color: var(--ink); }
.dai__group { margin: 1.5rem 0 .75rem; font-size: 1.0625rem; }
.dai__group-note { margin: -.4rem 0 .75rem; font-size: .875rem; color: var(--muted); }

.dai-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.dai-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: 1rem 1.1rem; }
.dai-item + .dai-item { border-top: 1px solid var(--line); }
@media (min-width: 40em) { .dai-item { grid-template-columns: minmax(0, 1fr) auto; -webkit-align-items: center; align-items: center; gap: 1.25rem; } }
.dai-item__info { min-width: 0; }
.dai-item__name { display: block; font-size: 1.125rem; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; }
.dai-item__name span { color: var(--brand); }
.dai-item__why { margin-top: .25rem; font-size: .875rem; color: var(--ink-2); line-height: 1.5; }
.dai-item__style { font-weight: 600; color: var(--muted); }
.dai-item__side { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; margin: 0 -1rem -.4rem 0; }
.dai-item__side > * { margin: 0 1rem .4rem 0; }
@media (min-width: 40em) {
  .dai-item__side { -webkit-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-align-items: flex-end; align-items: flex-end; margin: 0; text-align: right; }
  .dai-item__side > * { margin: 0; }
  .dai-item__side > * + * { margin-top: .4rem; }
}
.dai-item__status { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; font-size: .8125rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.dai-item__status .i { width: 1rem; height: 1rem; margin-right: .3rem; }
.dai-item--free .dai-item__status { color: var(--ok); }
.dai-item__price { font-size: .9375rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.dai-item__price em { font-style: normal; font-weight: 500; font-size: .8125rem; color: var(--muted); }
.dai-item__side .btn { gap: 0; }
.dai-item__side .btn .i { width: 1rem; height: 1rem; margin-right: .4rem; }
.dai-list--checking .dai-item__name { color: var(--ink-2); }

.dai-spin { display: inline-block; width: .85rem; height: .85rem; margin-right: .4rem; border: 2px solid var(--line-2); border-top-color: var(--brand); border-radius: 50%; -webkit-animation: dai-spin .8s linear infinite; animation: dai-spin .8s linear infinite; }

.dai-taken { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); }
.dai-taken__item { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; padding: .7rem 1.1rem; }
.dai-taken__item + .dai-taken__item { border-top: 1px solid var(--line); }
.dai-taken__item .dai-item__name { min-width: 0; margin-right: 1rem; font-size: .9375rem; font-weight: 600; color: var(--muted); }
.dai-taken__item .dai-item__name span { color: var(--muted); }
.dai-taken__status { -webkit-flex: none; flex: none; font-size: .8125rem; font-weight: 600; color: var(--muted); }

.dai__foot { margin-top: 1.25rem; font-size: .8125rem; color: var(--muted); text-align: center; }

.dai-hint { margin-top: .7rem; font-size: .875rem; }
.dai-hint a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.dai-hint a:hover { color: var(--brand-700); }

@-webkit-keyframes dai-spin { to { -webkit-transform: rotate(360deg); } }
@keyframes dai-spin { to { transform: rotate(360deg); } }
@-webkit-keyframes dai-pulse { 50% { opacity: .35; } }
@keyframes dai-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .dai-spin, .dai__actions .btn.is-busy .i { -webkit-animation: none; animation: none; }
}