orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/support/Support.module.css

@@ -1,1133 +0,0 @@
-.root {
-  color: var(--orionplace-text);
-  font: inherit;
-}
-
-.stack {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-.button,
-.tool {
-  display: inline-flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin: 0;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  background: transparent;
-  color: var(--orionplace-text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 500;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  outline: none;
-}
-
-/* The page's actions, as `op-feature-button` in the other packages. */
-.button {
-  min-height: 2.75rem;
-  padding: 0.5rem 1.25rem;
-}
-
-/* Compact tools beside a conversation, as `op-support-tool`. */
-.tool {
-  min-height: 2.25rem;
-  padding: 0 0.75rem;
-  border-color: var(--orionplace-border);
-  font-size: 0.6875rem;
-  line-height: 1.2;
-}
-
-.button:focus-visible,
-.tool:focus-visible {
-  border-color: var(--orionplace-text);
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .button:hover:not(:disabled),
-  .tool:hover:not(:disabled) {
-    border-color: var(--orionplace-text);
-    background: var(--orionplace-hover);
-  }
-}
-
-.primary {
-  border-color: var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-}
-
-.primary:focus-visible {
-  border-color: var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  opacity: 0.85;
-}
-
-@media (hover: hover) {
-  .primary:hover:not(:disabled) {
-    border-color: var(--orionplace-accent);
-    background: var(--orionplace-accent);
-    opacity: 0.85;
-  }
-}
-
-.danger {
-  color: var(--orionplace-danger);
-}
-
-.tool.danger:focus-visible {
-  border-color: var(--orionplace-danger);
-}
-
-@media (hover: hover) {
-  .tool.danger:hover:not(:disabled) {
-    border-color: var(--orionplace-danger);
-  }
-}
-
-.button:disabled,
-.tool:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.icon {
-  width: 1.125rem;
-  height: 1.125rem;
-  flex: none;
-}
-
-.button .icon {
-  width: 1rem;
-  height: 1rem;
-}
-
-.iconButton {
-  width: 2.25rem;
-  padding: 0;
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-
-.link {
-  color: inherit;
-  text-decoration: none;
-  border-bottom: 1px solid currentColor;
-}
-
-.link:focus-visible {
-  color: var(--orionplace-muted);
-  outline: none;
-}
-
-@media (hover: hover) {
-  .link:hover {
-    color: var(--orionplace-muted);
-    outline: none;
-  }
-}
-
-.item {
-  display: flex;
-  min-width: 0;
-  align-items: flex-start;
-  gap: 0.75rem;
-}
-
-.itemPhoto,
-.subscriptionPhoto {
-  display: grid;
-  width: 5rem;
-  height: 5rem;
-  box-sizing: border-box;
-  flex: none;
-  place-items: center;
-  overflow: hidden;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-muted);
-}
-
-.itemPhoto img,
-.itemPhoto > span,
-.subscriptionPhoto img,
-.subscriptionPhoto > span {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.subscriptionPhoto svg {
-  width: 2rem;
-  height: 2rem;
-}
-
-.itemBody {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.itemBody p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-.itemBody .itemName {
-  color: var(--orionplace-text);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.gallery {
-  display: flex;
-  max-width: 100%;
-  gap: 0.5rem;
-  margin: 0.5rem 0 0;
-  padding: 0;
-  overflow-x: auto;
-  list-style: none;
-}
-
-.gallery li {
-  flex: none;
-}
-
-.gallery button {
-  display: block;
-  width: 3rem;
-  height: 3rem;
-  box-sizing: border-box;
-  overflow: hidden;
-  padding: 0;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  cursor: pointer;
-}
-
-.gallery button[aria-pressed="true"],
-.gallery button:focus-visible {
-  border-color: var(--orionplace-text);
-  outline: none;
-}
-
-@media (hover: hover) {
-  .gallery button:hover {
-    border-color: var(--orionplace-text);
-    outline: none;
-  }
-}
-
-.gallery img,
-.gallery button > span {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.subscriptionHeading {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem 0.5rem;
-}
-
-.subscriptionState {
-  padding: 0.125rem 0.5rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-muted-surface);
-  color: var(--orionplace-muted);
-  font-size: 0.6875rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.subscriptionState[data-state="active"] {
-  border-color: var(--orionplace-success);
-  color: var(--orionplace-success);
-}
-
-.subscriptionState[data-state="ended"] {
-  border-color: var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-
-.subscriptionState[data-state="pending"] {
-  border-color: var(--orionplace-attention);
-  color: var(--orionplace-attention);
-}
-
-.facts {
-  display: grid;
-  gap: 0.25rem 1.5rem;
-  margin: 0.25rem 0 0;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-}
-
-.facts div {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.facts dt {
-  color: var(--orionplace-muted);
-}
-
-.facts dd {
-  margin: 0;
-  font-variant-numeric: tabular-nums;
-}
-
-.form {
-  gap: 0.75rem;
-  padding-top: 1.25rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-/* A new conversation: the form follows its heading without a divider. */
-.pane > .form {
-  padding-top: 0;
-  border-top: 0;
-}
-
-.label {
-  display: block;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.required,
-.error {
-  color: var(--orionplace-danger);
-}
-
-/* The required marker follows the label text on the same line. */
-.required {
-  letter-spacing: 0;
-}
-
-.textarea {
-  width: 100%;
-  min-height: 6rem;
-  max-height: 20rem;
-  box-sizing: border-box;
-  padding: 0.5rem 0.75rem;
-  overflow-y: auto;
-  resize: none;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  color: inherit;
-  font: inherit;
-  outline: none;
-}
-
-.textarea:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-.textarea:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-/* A new return request: the defect mark and, when only a defect can be
-   returned, the reason it cannot be cleared. */
-.defect {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.defectChoice {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.defectChoice input:disabled {
-  cursor: default;
-  opacity: 0.6;
-}
-
-.defect p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.8125rem;
-  line-height: 1.5;
-}
-
-/* A return request marked as a defect, beside the conversation type. */
-.defectMark {
-  color: var(--orionplace-text);
-}
-
-.files {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.file {
-  display: inline-flex;
-  max-width: 100%;
-  align-items: center;
-  gap: 0.5rem;
-  padding-left: 0.625rem;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-muted);
-}
-
-.fileName {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--orionplace-text);
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file .tool {
-  border-width: 0 0 0 1px;
-}
-
-.formActions,
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.formActions {
-  justify-content: space-between;
-}
-
-.notice {
-  margin: 0;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-muted-surface);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.notice p {
-  margin: 0;
-}
-
-.noticeError {
-  border-color: var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-
-.thumbnail {
-  width: 7rem;
-  height: 7rem;
-  flex: none;
-}
-
-.thumbnailLink,
-.thumbnailState {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-
-.thumbnailLink img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumbnailState {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  padding: 0.375rem;
-  color: var(--orionplace-muted);
-  text-align: center;
-}
-
-.thumbnailState p {
-  margin: 0;
-  font-size: 0.6875rem;
-  line-height: 1.3;
-}
-
-/* The attached image in a window on the page. */
-.viewer {
-  box-sizing: border-box;
-  max-width: calc(100vw - 2rem);
-  max-height: calc(100dvh - 2rem);
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-}
-
-.viewer::backdrop {
-  background: rgb(0 0 0 / 0.72);
-}
-
-.viewer img {
-  display: block;
-  width: min(calc(100vw - 34px), 960px);
-  height: auto;
-  max-height: calc(100dvh - 34px);
-  object-fit: contain;
-}
-
-.tool.viewerClose {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  background: var(--orionplace-surface);
-}
-
-.conversationHeader {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.conversationHeading {
-  display: grid;
-  min-width: 0;
-  gap: 0.375rem;
-}
-
-.conversationHeading h2,
-.refundTitle,
-.subjectTitle {
-  margin: 0;
-  font-size: 0.75rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.conversationHeading h2 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem 0.75rem;
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.6875rem;
-  letter-spacing: 0.08em;
-  line-height: 1.5;
-  text-transform: uppercase;
-}
-
-.meta > * + *::before {
-  margin-right: 0.75rem;
-  content: "·";
-}
-
-.meta > .status::before {
-  margin-right: 0.5rem;
-}
-
-.status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.status svg {
-  width: 0.8125rem;
-  height: 0.8125rem;
-}
-
-.decision[data-tone="success"] {
-  color: var(--orionplace-success);
-}
-
-.decision[data-tone="danger"] {
-  color: var(--orionplace-danger);
-}
-
-.orderLink {
-  justify-self: start;
-  font-size: 0.75rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.tools {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.panel,
-.subject {
-  box-sizing: border-box;
-  padding: 1rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-
-.subject {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.confirmation {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.messages {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.message {
-  display: flex;
-  max-width: min(85%, 40rem);
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: flex-start;
-  gap: 0.25rem;
-}
-
-.ownMessage {
-  align-items: flex-end;
-  align-self: flex-end;
-}
-
-.bubble {
-  display: flex;
-  min-width: 0;
-  max-width: 100%;
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-
-.ownMessage .bubble {
-  border-color: var(--orionplace-muted-surface);
-  background: var(--orionplace-muted-surface);
-}
-
-.sender,
-.messageTime {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.6875rem;
-  letter-spacing: 0.08em;
-  line-height: 1.5;
-  text-transform: uppercase;
-}
-
-.messageText {
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-size: 0.875rem;
-  line-height: 1.6;
-  white-space: pre-wrap;
-}
-
-.attachments {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-}
-
-.rating {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  gap: 1rem;
-}
-
-.ratingField {
-  min-width: min(100%, 18rem);
-}
-
-.refund {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 1rem 1rem 1rem 1.125rem;
-  border-left: 2px solid var(--orionplace-attention);
-  background: var(--orionplace-attention-surface);
-}
-
-.refund[data-tone="success"] {
-  border-color: var(--orionplace-success);
-  background: var(--orionplace-success-surface);
-}
-
-.refund[data-tone="danger"] {
-  border-color: var(--orionplace-danger);
-  background: var(--orionplace-danger-surface);
-}
-
-.refundHeader {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.25rem 1rem;
-}
-
-.refundState {
-  font-size: 0.75rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.refundCopy {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.refundFacts {
-  display: grid;
-  gap: 0.25rem 1rem;
-  margin: 0;
-  grid-template-columns: max-content minmax(0, 1fr);
-}
-
-.refundFacts div {
-  display: contents;
-}
-
-.refundFacts dt {
-  color: var(--orionplace-muted);
-  font-size: 0.6875rem;
-  letter-spacing: 0.08em;
-  line-height: 1.6;
-  text-transform: uppercase;
-}
-
-.refundFacts dd {
-  min-width: 0;
-  margin: 0;
-  overflow-wrap: anywhere;
-  font-size: 0.8125rem;
-  line-height: 1.6;
-}
-
-.refundItems {
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.refundItems li + li {
-  padding-top: 0.625rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.refundCount {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.5;
-}
-
-.page {
-  container-type: inline-size;
-}
-
-.pageHeading,
-.newHeading {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-/* The new-conversation heading stacks its title and hint, as in Nuxt. */
-.newHeading {
-  display: grid;
-  gap: 0.25rem;
-}
-
-.pageHeading h1,
-.newHeading h2 {
-  margin: 0;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.pageHeading h1 {
-  font-size: 1.5rem;
-  line-height: 1.25;
-}
-
-.newHeading h2 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  letter-spacing: 0.08em;
-}
-
-.newHeading p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-}
-
-.refreshNotice {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.layout {
-  display: grid;
-  min-width: 0;
-  align-items: start;
-  gap: 1.5rem;
-}
-
-.list,
-.pane {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1.25rem;
-}
-
-/* On a narrow page the list and the open conversation share one column and
-   only the pane named by data-pane is shown, as in the other packages. */
-.layout[data-pane='conversation'] > .list,
-.layout[data-pane='list'] > .pane {
-  display: none;
-}
-
-.toolbar {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-/* Tabs: uppercase labels with a bottom-border indicator. */
-.tabs {
-  display: flex;
-  min-width: 0;
-  min-height: 2.25rem;
-  flex: 1;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0 1.5rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.tabs .button {
-  margin-bottom: -1px;
-  padding: 0;
-  border: 0;
-  border-bottom: 2px solid transparent;
-  background: transparent;
-  color: var(--orionplace-muted);
-}
-
-.tabs .button:focus-visible {
-  background: transparent;
-  color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .tabs .button:hover:not(:disabled) {
-    background: transparent;
-    color: var(--orionplace-text);
-  }
-}
-
-.tabs .button[aria-current="page"] {
-  border-bottom-color: var(--orionplace-text);
-  background: transparent;
-  color: var(--orionplace-text);
-}
-
-/* The open and closed tabs carry the padlock the conversation rows use. */
-.tabs .icon {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.ticketList {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  padding: 0;
-  border-top: 1px solid var(--orionplace-border);
-  list-style: none;
-}
-
-/* Ticket rows: icon, title and type, date and unread counter. */
-.ticket {
-  display: grid;
-  width: 100%;
-  box-sizing: border-box;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 0.75rem;
-  margin: 0;
-  padding: 0.875rem 0.75rem;
-  border: 0;
-  border-bottom: 1px solid var(--orionplace-border);
-  border-left: 2px solid transparent;
-  background: transparent;
-  color: var(--orionplace-text);
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: 1.4;
-  text-align: left;
-  outline: none;
-}
-
-.ticket:focus-visible {
-  border-left-color: var(--orionplace-muted);
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .ticket:hover:not(:disabled) {
-    border-left-color: var(--orionplace-muted);
-    background: var(--orionplace-hover);
-  }
-}
-
-.ticket[aria-current="page"] {
-  border-left-color: var(--orionplace-text);
-  background: var(--orionplace-muted-surface);
-}
-
-.ticket:disabled {
-  cursor: default;
-}
-
-.ticketType {
-  display: grid;
-  width: 2rem;
-  height: 2rem;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  place-items: center;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-muted-surface);
-}
-
-.ticketType svg {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-
-.ticketBody,
-.ticketSide {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.ticketSide {
-  align-items: flex-end;
-}
-
-.ticketTitle {
-  font-weight: 500;
-  overflow-wrap: anywhere;
-}
-
-.ticketMeta {
-  color: var(--orionplace-muted);
-  font-size: 0.6875rem;
-  letter-spacing: 0.08em;
-  line-height: 1.5;
-  text-transform: uppercase;
-}
-
-/* Dates and times stay on one line, as in Nuxt. */
-time.ticketMeta,
-.messageTime {
-  white-space: nowrap;
-}
-
-.ticketSubject {
-  display: -webkit-box;
-  overflow: hidden;
-  color: var(--orionplace-text);
-  font-size: 0.8125rem;
-  line-height: 1.4;
-  overflow-wrap: anywhere;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.unread {
-  display: inline-flex;
-  min-width: 1.25rem;
-  height: 1.25rem;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 0 0.375rem;
-  border-radius: 9999px;
-  background: var(--orionplace-inverse-surface);
-  color: var(--orionplace-inverse-text);
-  font-size: 0.6875rem;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-}
-
-/* Back to the list on a narrow page: an underlined text link. */
-.button.back {
-  min-height: 0;
-  align-self: flex-start;
-  gap: 0.375rem;
-  padding: 0 0 2px;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  background: transparent;
-  font-weight: 400;
-  line-height: inherit;
-}
-
-.button.back:focus-visible {
-  background: transparent;
-  color: var(--orionplace-muted);
-}
-
-@media (hover: hover) {
-  .button.back:hover:not(:disabled) {
-    background: transparent;
-    color: var(--orionplace-muted);
-  }
-}
-
-.back .icon {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.placeholder {
-  display: flex;
-  min-height: 15rem;
-  align-items: center;
-  justify-content: center;
-}
-
-.loading {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-}
-
-@container (min-width: 44rem) {
-  .layout {
-    grid-template-columns: 280px minmax(0, 1fr);
-    gap: 0;
-  }
-
-  .layout[data-pane] > .list {
-    display: flex;
-    min-height: 100%;
-    padding-right: 1.5rem;
-    border-right: 1px solid var(--orionplace-border);
-  }
-
-  .layout[data-pane] > .pane {
-    display: flex;
-    padding-left: 2rem;
-  }
-
-  .back {
-    display: none;
-  }
-}
-
-/* The support page's own width, as in the other packages. */
-@container (min-width: 592px) {
-  .item {
-    gap: 1rem;
-  }
-
-  .itemPhoto,
-  .subscriptionPhoto {
-    width: 6rem;
-    height: 6rem;
-  }
-
-  .facts {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-/* The title follows the component's own width, as in the other packages. */
-@container (min-width: 592px) {
-  .pageHeading h1 { font-size: 1.875rem; }
-}