orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,1133 @@
+.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; }
+}