.public-wall {
    display: grid;
    gap: 24px;
    padding: 32px;
}

.public-wall-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.public-wall-toolbar h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.public-wall-filter,
.public-wall-filter label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.public-wall-filter label,
.public-wall-filter button,
.public-wall-load-more,
.public-wall-composer > summary,
.wall-item-owner-footer a,
.wall-item-comment-footer button,
.wall-photo-button,
.wall-photo-viewer button {
    min-width: 44px;
    min-height: 44px;
}

.public-wall-filter input {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
}

body.light-mode .public-wall-filter input {
    accent-color: var(--accent-light);
}

.public-wall-filter button,
.public-wall-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    background: transparent;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

body.light-mode :is(.public-wall-filter button, .public-wall-load-more) {
    border-color: var(--border-light);
    color: var(--text-light);
}

.public-wall-composer {
    padding-inline-start: 16px;
    border-inline-start: 3px solid transparent;
}

.public-wall-composer[open] {
    border-inline-start-color: var(--accent);
}

body.light-mode .public-wall-composer[open] {
    border-inline-start-color: var(--accent-light);
}

.public-wall-composer > summary {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.public-wall-composer-form {
    margin-top: 16px;
}

.public-wall-composer-form .form-label {
    font-weight: 600;
}

.public-wall-composer-form textarea {
    min-height: 160px;
    resize: vertical;
}

.public-wall-composer-form textarea[aria-invalid="true"] {
    outline: 2px solid var(--error-dark);
    outline-offset: 1px;
}

body.light-mode .public-wall-composer-form textarea[aria-invalid="true"] {
    outline-color: var(--error-light);
}

.public-wall-body-limit-exceeded {
    color: var(--error-dark);
    font-weight: 700;
}

body.light-mode .public-wall-body-limit-exceeded {
    color: var(--error-light);
}

.public-wall-composer-error {
    padding: 16px;
    border-inline-start: 3px solid var(--error-dark);
    color: var(--error-dark);
    overflow-wrap: anywhere;
}

body.light-mode .public-wall-composer-error {
    border-inline-start-color: var(--error-light);
    color: var(--error-light);
}

.public-wall-real-stone-policy,
.public-wall-owner-guidance {
    margin: 0;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    overflow-wrap: anywhere;
}

body.light-mode :is(.public-wall-real-stone-policy, .public-wall-owner-guidance) {
    color: var(--text-light);
}

.public-wall-item-list {
    display: grid;
    gap: 24px;
    min-width: 0;
}

.wall-item {
    display: grid;
    gap: 24px;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    background: rgb(53 53 53);
}

body.light-mode .wall-item {
    border-color: var(--border-light);
    background: var(--surface-light);
}

.wall-item p {
    margin: 0;
    color: var(--text-dark);
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
}

body.light-mode .wall-item p {
    color: var(--text-light);
}

.wall-item-body,
.wall-item-explanation,
.wall-completed-design,
.wall-cut-facts dd {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wall-item-published-at,
.wall-completed-design time,
.wall-item-owner-footer time {
    color: var(--muted-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

body.light-mode :is(.wall-item-published-at, .wall-completed-design time, .wall-item-owner-footer time) {
    color: var(--muted-light);
}

.wall-completed-header {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.wall-completed-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.wall-completed-design {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    min-width: 0;
}

.wall-completed-design > img {
    display: block;
    flex: 0 1 auto;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    object-position: left center;
}

.wall-completed-design > div {
    display: grid;
    flex: 0 1 auto;
    align-content: center;
    gap: 8px;
    min-width: 0;
}

.wall-missing-design-ribbon {
    color: var(--error-dark) !important;
}

body.light-mode .wall-missing-design-ribbon {
    color: var(--error-light) !important;
}

.wall-photo-grid {
    display: grid;
    width: min(100%, 640px);
    justify-self: center;
    gap: 16px;
    min-width: 0;
}

.wall-photo-grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

.wall-photo-grid-2,
.wall-photo-grid-3,
.wall-photo-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wall-photo-slot,
.wall-photo-button {
    width: 100%;
    min-width: 0;
}

.wall-photo-button {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.wall-photo-button img,
.wall-youtube-link img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
}

.wall-cut-facts {
    display: grid;
    gap: 8px;
    margin: 0;
}

.wall-cut-facts > div {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
}

.wall-cut-facts dt,
.wall-cut-facts dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

.wall-cut-facts dt {
    font-weight: 600;
}

.wall-youtube-link {
    --wall-youtube-thumbnail-size: 65%;
    display: grid;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.wall-youtube-link img {
    width: var(--wall-youtube-thumbnail-size);
}

.wall-youtube-link span {
    justify-self: center;
    text-align: center;
}

.wall-item-owner-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    min-width: 0;
}

.wall-item-owner-footer a {
    display: inline-flex;
    align-items: center;
}

.wall-item-comment-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-dark);
}

body.light-mode .wall-item-comment-footer {
    border-top-color: var(--border-light);
}

/* The count opens the same panel as the action beside it, so it is a button ; everything the browser
   gives a button is taken back off it all the same -- the border, the surface, its own font -- because
   what it says is a fact about the item rather than an action being offered. What is left saying it can
   be pressed is the accent it is drawn in, which is the colour everything else on this site that can be
   pressed carries, and then the pointer and the focus ring.

   The minimum height it is given with the others above is what a thumb needs and is the reason the text
   is centred rather than sitting on the top edge of a box a third again as tall as itself. */
.wall-item-comment-count {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

body.light-mode .wall-item-comment-count {
    color: var(--accent-light);
}

/* Under the pointer as well, since the colour alone is what a thumb has to go on. */
.wall-item-comment-count:hover {
    text-decoration: underline;
}

.wall-item-comment-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: transparent;
    color: var(--text-dark);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    margin-inline-start: auto;
    cursor: pointer;
}

body.light-mode .wall-item-comment-action {
    border-color: var(--accent-light);
    color: var(--text-light);
}

.wall-item-comment-footer button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

body.light-mode .wall-item-comment-footer button:focus-visible {
    outline-color: var(--accent-light);
}

.wall-item-comments-open {
    box-shadow: inset 3px 0 var(--accent);
}

body.light-mode .wall-item-comments-open {
    box-shadow: inset 3px 0 var(--accent-light);
}

.public-wall-continuation {
    display: grid;
    justify-items: start;
    gap: 8px;
}

.public-wall-continuation-status {
    margin: 0;
    color: var(--error-dark);
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

body.light-mode .public-wall-continuation-status {
    color: var(--error-light);
}

.wall-photo-viewer {
    width: min(960px, calc(100% - 48px));
    max-width: 100%;
    padding: 24px;
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    background: var(--surface-dark);
    color: var(--text-dark);
    opacity: 0;
    transition: opacity 160ms ease;
}

.wall-photo-viewer[open] {
    display: grid;
    gap: 16px;
    opacity: 1;
}

.wall-photo-viewer::backdrop {
    background: color-mix(in srgb, var(--bg-dark) 80%, transparent);
}

body.light-mode .wall-photo-viewer {
    border-color: var(--border-light);
    background: var(--surface-light);
    color: var(--text-light);
}

body.light-mode .wall-photo-viewer::backdrop {
    background: color-mix(in srgb, var(--bg-light) 80%, transparent);
}

.wall-photo-viewer-close {
    justify-self: end;
}

.wall-photo-viewer-media {
    display: grid;
    place-items: center;
    min-width: 0;
}

.wall-photo-viewer-media img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100dvh - 240px);
    object-fit: contain;
}

.wall-photo-viewer-unavailable,
.wall-photo-viewer-status {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
}

.wall-photo-viewer-navigation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.wall-photo-viewer button {
    padding: 8px 16px;
    border: 1px solid var(--border-dark);
    border-radius: 10px;
    background: transparent;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

body.light-mode .wall-photo-viewer button {
    border-color: var(--border-light);
    color: var(--text-light);
}

.wall-photo-viewer button:disabled {
    color: var(--muted-dark);
}

body.light-mode .wall-photo-viewer button:disabled {
    color: var(--muted-light);
}

body.wall-photo-viewer-open {
    overflow: hidden;
}