/* the viewer: the template and its values beside the drawing and its folding */
wa-page {
    --menu-width: 0;
    --aside-width: 0;
}

main {
    max-inline-size: 100%;
    margin-inline: auto;
    padding: 0;
}

.viewer {
    display: grid;
    grid-template-columns: minmax(16rem, 20rem) 1fr 1fr;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s);
    block-size: calc(100dvh - 9rem);
    min-block-size: 32rem;
}

.viewer-side {
    /* no wider than its column, however long a template's name (a grid item is as wide as its widest content
       otherwise) */
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
    overflow: auto;
    padding-inline-end: var(--wa-space-2xs);
}

.viewer-pick {
    min-inline-size: 0;
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    gap: var(--wa-space-2xs);
}

/* the file chooser behind "Open .piq…": its own button never shown (the page's input styles would show it, hidden or
   not) */
.viewer-pick input[type=file] {
    display: none !important;
}

.viewer-pick label,
.viewer-inputs label {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.viewer-description {
    margin: 0;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
    white-space: pre-line;
}

.viewer-description:empty {
    display: none;
}

.viewer-inputs {
    display: grid;
    gap: var(--wa-space-xs);
}

.viewer-input {
    display: grid;
    gap: 2px;
}

.viewer-input .row {
    display: grid;
    grid-template-columns: 1fr 6.5rem;
    gap: var(--wa-space-xs);
    align-items: center;
}

.viewer-input .row.single {
    grid-template-columns: 1fr;
}

.viewer-input input[type=number],
.viewer-input input[type=text],
.viewer-input select,
.viewer-pick select {
    inline-size: 100%;
    /* a long name cut short (…), not the list made wider: the whole name is its tooltip */
    min-inline-size: 0;
    max-inline-size: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-input .toggle {
    display: flex;
    gap: var(--wa-space-xs);
    align-items: center;
}

.viewer-input.invalid input,
.viewer-input.invalid select {
    outline: 2px solid var(--wa-color-danger-fill-loud);
}

.viewer-input .error {
    font-size: var(--wa-font-size-xs);
    color: var(--wa-color-danger-on-quiet);
}

.viewer-status {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
    min-block-size: 1.2em;
}

.viewer-status.error {
    color: var(--wa-color-danger-on-quiet);
}

.viewer-printed pre {
    font-size: var(--wa-font-size-xs);
    white-space: pre-wrap;
    margin: 0;
}

.viewer-pane {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    border: 1px solid var(--wa-color-neutral-border-quiet);
    border-radius: var(--wa-border-radius-m);
    overflow: hidden;
    background: var(--wa-color-surface-default);
}

.viewer-bar {
    display: flex;
    gap: var(--wa-space-xs);
    align-items: center;
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    background: var(--wa-color-surface-raised);
    border-block-end: 1px solid var(--wa-color-neutral-border-quiet);
    font-size: var(--wa-font-size-s);
    min-block-size: 2.5rem;
}

.viewer-title {
    font-weight: var(--wa-font-weight-semibold);
}

.viewer-layers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs) var(--wa-space-s);
    flex: 1;
    min-inline-size: 0;
}

.viewer-layers label {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    white-space: nowrap;
    font-size: var(--wa-font-size-xs);
}

.viewer-layers .swatch {
    inline-size: 0.8em;
    block-size: 0.8em;
    border-radius: 2px;
    display: inline-block;
}

.viewer-bar input[type=range] {
    flex: 1;
    min-inline-size: 4rem;
}

.viewer-button {
    font: inherit;
    font-size: var(--wa-font-size-s);
    padding: 2px 10px;
    border-radius: var(--wa-border-radius-s);
    border: 1px solid var(--wa-color-neutral-border-normal);
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-normal);
    cursor: pointer;
}

/* the material's look: as narrow as the bar needs, its whole name its tooltip */
.viewer-look {
    flex: 0 1 11rem;
    min-inline-size: 5rem;
    max-inline-size: 11rem;
    font: inherit;
    font-size: var(--wa-font-size-s);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewer-button:hover {
    background: var(--wa-color-neutral-fill-quiet);
}

.viewer-2d,
.viewer-3d {
    position: relative;
    flex: 1;
    min-block-size: 0;
    overflow: hidden;
    touch-action: none;
    background: var(--wa-color-surface-default);
}

.viewer-2d {
    cursor: grab;
}

.viewer-2d.panning {
    cursor: grabbing;
}

.viewer-2d svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

.viewer-3d canvas {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.viewer-note {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    pointer-events: none;
    text-align: center;
    padding: var(--wa-space-m);
}

.viewer-note[hidden] {
    display: none;
}

.viewer-busy::after {
    content: "";
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: 8px;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    border: 2px solid var(--wa-color-brand-fill-loud);
    border-inline-end-color: transparent;
    animation: viewer-spin 0.8s linear infinite;
}

@keyframes viewer-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1100px) {
    .viewer {
        grid-template-columns: 1fr;
        block-size: auto;
    }

    .viewer-pane {
        block-size: 60vh;
    }
}

/* the viewer's dialogs: augmented reality and sharing for review */
.viewer-dialog {
    border: 1px solid var(--wa-color-neutral-border-quiet);
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-m);
    inline-size: min(36rem, 92vw);
    background: var(--wa-color-surface-default);
    color: var(--wa-color-text-normal);
}

.viewer-dialog::backdrop {
    background: rgb(0 0 0 / 0.4);
}

.viewer-dialog h2 {
    margin: 0 0 var(--wa-space-s);
    font-size: var(--wa-font-size-l);
}

.viewer-dialog model-viewer {
    inline-size: 100%;
    block-size: min(50vh, 24rem);
    background: var(--wa-color-surface-raised);
    border-radius: var(--wa-border-radius-m);
}

.viewer-dialog .review-form input,
.viewer-dialog .review-form textarea {
    inline-size: 100%;
    box-sizing: border-box;
}

.viewer-dialog .viewer-link {
    inline-size: 100%;
    box-sizing: border-box;
    font-family: var(--wa-font-family-code);
    font-size: var(--wa-font-size-s);
}

/* a review: the model and its pins beside the comments and the verdict */
.review {
    display: grid;
    grid-template-columns: 1fr minmax(18rem, 26rem);
    gap: var(--wa-space-s);
    padding: var(--wa-space-s);
    block-size: calc(100dvh - 9rem);
    min-block-size: 32rem;
}

.review-missing {
    padding: var(--wa-space-xl);
    max-inline-size: 40rem;
    margin-inline: auto;
}

/* a locked review's password form; the designer told their link has expired */
.review-locked form {
    max-inline-size: 24rem;
}

.review-expired {
    color: var(--wa-color-warning-on-quiet);
}

.review-stage {
    min-block-size: 0;
}

.review-model {
    position: relative;
    flex: 1;
    min-block-size: 0;
}

.review-model model-viewer {
    inline-size: 100%;
    block-size: 100%;
    background: var(--wa-color-surface-default);
}

.review-model model-viewer.pinning {
    cursor: crosshair;
}

.review-spacer {
    flex: 1;
}

.review-state {
    font-size: var(--wa-font-size-xs);
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--wa-color-warning-fill-quiet);
    color: var(--wa-color-warning-on-quiet);
    white-space: nowrap;
}

.review-state[data-state=Approved] {
    background: var(--wa-color-success-fill-quiet);
    color: var(--wa-color-success-on-quiet);
}

.review-state[data-state=Rejected] {
    background: var(--wa-color-danger-fill-quiet);
    color: var(--wa-color-danger-on-quiet);
}

.viewer-button.active,
.viewer-button[aria-pressed=true] {
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
    border-color: var(--wa-color-brand-fill-loud);
}

.review-ar {
    position: absolute;
    inset-block-end: var(--wa-space-s);
    inset-inline-end: var(--wa-space-s);
    font-weight: var(--wa-font-weight-semibold);
}

.review-hint {
    position: absolute;
    inset-block-start: var(--wa-space-s);
    inset-inline: 0;
    margin-inline: auto;
    inline-size: fit-content;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
    font-size: var(--wa-font-size-s);
    pointer-events: none;
}

.review-hint[hidden],
.review-noar[hidden] {
    display: none;
}

.review-noar {
    margin: 0;
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    font-size: var(--wa-font-size-xs);
    color: var(--wa-color-text-quiet);
    border-block-start: 1px solid var(--wa-color-neutral-border-quiet);
}

/* a comment's pin: its number in a round marker on the surface */
.review-pin {
    display: grid;
    place-items: center;
    inline-size: 26px;
    block-size: 26px;
    padding: 0;
    border-radius: 50% 50% 50% 0;
    border: 2px solid #fff;
    background: var(--wa-color-brand-fill-loud, #3b6fd8);
    color: #fff;
    font: 600 12px/1 system-ui, sans-serif;
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
    cursor: pointer;
    transform: translate(0, -50%) rotate(-45deg);
}

.review-pin > * {
    transform: rotate(45deg);
}

.review-pin:not([data-visible]) {
    opacity: 0.35;
}

.review-pin.resolved {
    background: #6b7280;
}

.review-pin.selected {
    outline: 3px solid var(--wa-color-warning-fill-loud, #f2a900);
}

.review-pin.new {
    background: var(--wa-color-success-fill-loud, #1f9d55);
}

.review-side h1 {
    font-size: var(--wa-font-size-xl);
    margin: 0;
}

.review-side h2 {
    font-size: var(--wa-font-size-m);
    margin: 0 0 var(--wa-space-2xs);
}

.review-owner,
.review-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs);
}

.review-owner a.viewer-button {
    text-decoration: none;
}

.review-owner[hidden],
.review-name[hidden],
.review-replying[hidden],
.review-form[hidden] {
    display: none;
}

.review-box {
    border: 1px solid var(--wa-color-neutral-border-quiet);
    border-radius: var(--wa-border-radius-m);
    padding: var(--wa-space-xs);
    display: grid;
    gap: var(--wa-space-2xs);
}

.review-form,
.review-name {
    display: grid;
    gap: var(--wa-space-2xs);
}

.review-form label,
.review-name label,
.review-all {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
}

.review-form textarea,
.review-name input {
    inline-size: 100%;
    box-sizing: border-box;
    font: inherit;
}

.review-approve {
    background: var(--wa-color-success-fill-loud);
    color: var(--wa-color-success-on-loud);
    border-color: var(--wa-color-success-fill-loud);
}

.review-reject {
    color: var(--wa-color-danger-on-quiet);
}

.review-where,
.review-replying {
    display: flex;
    gap: var(--wa-space-xs);
    align-items: center;
    font-size: var(--wa-font-size-s);
}

.review-decisions,
.review-comments {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--wa-space-2xs);
    font-size: var(--wa-font-size-s);
}

.review-decisions li[data-verdict=Approved] {
    color: var(--wa-color-success-on-quiet);
}

.review-decisions li[data-verdict=Rejected] {
    color: var(--wa-color-danger-on-quiet);
}

.review-comment {
    border-radius: var(--wa-border-radius-s);
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    background: var(--wa-color-surface-raised);
    cursor: pointer;
}

.review-comment.selected {
    outline: 2px solid var(--wa-color-warning-fill-loud);
}

.review-comment.resolved {
    opacity: 0.6;
}

.review-comment.designer {
    border-inline-start: 3px solid var(--wa-color-brand-fill-loud);
}

.review-comment p {
    margin: 2px 0;
    white-space: pre-line;
}

.review-comment-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-2xs);
    align-items: baseline;
}

.review-number {
    display: inline-grid;
    place-items: center;
    min-inline-size: 1.4em;
    block-size: 1.4em;
    border-radius: 999px;
    background: var(--wa-color-neutral-fill-quiet);
    font-size: var(--wa-font-size-xs);
    font-weight: var(--wa-font-weight-semibold);
}

.review-number.pinned {
    background: var(--wa-color-brand-fill-loud);
    color: var(--wa-color-brand-on-loud);
}

.review-tag {
    font-size: var(--wa-font-size-2xs, 0.7rem);
    padding: 0 6px;
    border-radius: 999px;
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-quiet);
}

.review-meta {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-xs);
}

.review-empty {
    color: var(--wa-color-text-quiet);
}

@media (max-width: 1100px) {
    .review {
        grid-template-columns: 1fr;
        block-size: auto;
    }

    .review-stage {
        block-size: 65vh;
    }
}