.conf-title {
    text-align: center;
    color: var(--feather, #ffd6ec);
}

.conf-intro {
    max-width: 62ch;
    margin: 0 auto 18px;
    color: #c8c8d4;
    text-align: center;
}

.conf-notice {
    color: var(--halo-gold, #ffe9a8);
    margin: 6px 0 12px;
}

.conf-error {
    color: #ff9db0;
    margin: 6px 0 12px;
}

.conf-send,
.conf-feed {
    margin: 22px 0;
}

.conf-send h2,
.conf-feed h2 {
    color: var(--lilac, #c9b8ff);
    font-size: 1rem;
    letter-spacing: 2px;
}

.conf-count {
    color: #7c7c8c;
    font-size: x-small;
}

.conf-hint {
    color: #7c7c8c;
    font-size: x-small;
}

.conf-row {
    margin: 10px 0;
}

.conf-block {
    display: block;
    margin: 10px 0;
    color: #9a9aa8;
    font-size: small;
}

.conf-send input[type="text"],
.conf-send input[type="url"],
.conf-send textarea,
.cw-item textarea,
.cw-item input[type="url"] {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #e8e8f2;
    font: inherit;
    padding: 7px 9px;
}

.conf-send textarea {
    min-height: 110px;
    resize: vertical;
}

.conf-art-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin: 12px 0;
}

.conf-btn {
    font: inherit;
    font-size: small;
    padding: 7px 13px;
    color: white;
    background: #2e497a;
    border: 2px solid #5bcefa;
    cursor: pointer;
    text-decoration: none;
}

.conf-btn:hover {
    box-shadow: 0 0 12px rgba(91, 206, 250, 0.5);
    transform: translateY(-1px);
}

.conf-send-btn {
    background: #b30f74;
    border-color: hotpink;
}

.conf-send-btn:hover {
    box-shadow: 0 0 12px rgba(255, 105, 180, 0.5);
}

.conf-file {
    display: inline-block;
    cursor: pointer;
}

.conf-canvas-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

#conf-canvas {
    width: min(100%, 640px);
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #0b0b14;
    touch-action: none;
    cursor: crosshair;
    flex: 1 1 420px;
}

.conf-brush {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 150px;
}

.conf-tools {
    display: flex;
    gap: 6px;
}

.conf-tool {
    flex: 1;
    font: inherit;
    font-size: 15px;
    padding: 6px 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #9a9aa8;
    cursor: pointer;
}

.conf-tool.is-on {
    color: #0b0b14;
    background: var(--feather, #ffd6ec);
    border-color: var(--feather, #ffd6ec);
}

.conf-lab {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: x-small;
    color: #9a9aa8;
}

.conf-lab input[type="color"] {
    width: 100%;
    height: 26px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.conf-palette {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.conf-swatch {
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    padding: 0;
}

.conf-swatch:hover {
    border-color: #fff;
    transform: translateY(-1px);
}

.conf-toolrow {
    display: flex;
    gap: 6px;
}

.conf-toolrow .conf-mini {
    flex: 1;
}

.conf-time {
    color: #7c7c8c;
    cursor: help;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.18);
}

.conf-answered {
    display: block;
    margin-top: 6px;
    color: #7c7c8c;
    font-size: x-small;
}

.conf-reply-art img {
    display: block;
    max-width: min(100%, 460px);
    height: auto;
    border: 1px solid rgba(255, 233, 168, 0.25);
    margin: 8px 0 4px;
}

.cw-attach {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cw-file {
    display: inline-block;
    cursor: pointer;
}

.cw-art-preview {
    display: block;
    max-width: min(100%, 320px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin: 8px 0;
}

.conf-foot {
    margin-top: 8px;
}

.conf-permalink,
.conf-more a,
.conf-feedlink a,
.conf-back a {
    color: #5bcefa;
    font-size: x-small;
    text-decoration: none;
}

.conf-permalink:hover,
.conf-more a:hover,
.conf-feedlink a:hover,
.conf-back a:hover {
    text-decoration: underline;
}

.conf-more {
    margin: 16px 0 4px;
}

.conf-feedlink {
    margin: 18px 0 0;
    text-align: right;
}

.conf-back {
    margin: 0 0 12px;
}

.conf-single {
    margin-top: 0;
}

.cw-draw {
    margin: 8px 0;
}

.cw-draw[hidden] {
    display: none;
}

.cw-draw-canvas {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #0b0b14;
    touch-action: none;
    cursor: crosshair;
}

.cw-draw-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    max-width: 520px;
}

.cw-dc {
    width: 44px;
    height: 24px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cw-ds {
    flex: 1;
}

.cw-mini {
    font: inherit;
    font-size: x-small;
    padding: 4px 9px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #9a9aa8;
    cursor: pointer;
}

.cw-mini:hover {
    color: var(--feather, #ffd6ec);
    border-color: var(--feather, #ffd6ec);
}

.cw-draw-toggle.is-on {
    color: #0b0b14;
    background: var(--halo-gold, #ffe9a8);
    border-color: var(--halo-gold, #ffe9a8);
}

/* the bigger room. whichever row it is, it lifts out of the page and fills the
   screen, and the canvas is re-backed at that size so strokes stay sharp.

   the tools float over the canvas on a bar rather than sitting under it in the
   flow: below it, they were a scroll away on a laptop, which meant leaving the
   drawing to change a colour. the strip at the bottom is reserved so the bar
   lands beside the canvas instead of across it. */
.conf-canvas-row.is-full,
.cw-draw.is-full {
    position: fixed;
    inset: 0;
    z-index: 60;
    margin: 0;
    padding: 16px;
    background: rgba(4, 4, 9, 0.985);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.conf-canvas-row.is-full #conf-canvas,
.cw-draw.is-full .cw-draw-canvas {
    max-width: none;
    max-height: none;
    border-color: rgba(255, 255, 255, 0.28);
    touch-action: none;
}

.conf-canvas-row.is-full .conf-brush,
.cw-draw.is-full .cw-draw-tools {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    margin: 0 auto;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    /* pinned by both edges rather than by a width. an absolutely positioned box
       that sizes itself gets its width from whichever side is left over, which
       made this wrap into five rows and, on a narrow screen, hang off the side
       by a few pixels. this cannot do either. */
    max-width: 1080px;
    max-height: 40vh;
    overflow-y: auto;
    padding: 8px 14px;
    border-radius: 16px;
    background: rgba(12, 12, 20, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

.conf-canvas-row.is-full .conf-brush > * {
    flex: 0 1 auto;
}

.conf-canvas-row.is-full .conf-palette {
    grid-template-columns: repeat(6, 26px);
}

.conf-canvas-row.is-full .conf-toolrow {
    display: contents;
}

.conf-canvas-row.is-full .conf-tools {
    flex: 0 0 auto;
}

/* width, not flex-basis: the label these sit in is a column, so a flex basis
   would be read as a height and stretch the slider to 150px tall, which is
   what made the whole bar 200px high. */
.cw-draw.is-full .cw-ds,
.conf-canvas-row.is-full .conf-lab input[type="range"] {
    width: 150px;
    flex: 0 0 auto;
}

.conf-big,
.cw-big {
    width: 100%;
}

.conf-canvas-row.is-full .conf-big,
.cw-draw.is-full .cw-big {
    width: auto;
}

.conf-big.is-on,
.cw-big.is-on {
    color: #0b0b14;
    background: var(--halo-gold, #ffe9a8);
    border-color: var(--halo-gold, #ffe9a8);
}

body.conf-drawing-full {
    overflow: hidden;
}

.conf-mini {
    font: inherit;
    font-size: x-small;
    padding: 5px 9px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #9a9aa8;
    cursor: pointer;
}

.conf-mini:hover {
    color: var(--feather, #ffd6ec);
    border-color: var(--feather, #ffd6ec);
}

#conf-preview {
    display: block;
    max-width: min(100%, 420px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin: 10px 0;
}

#conf-preview[hidden] {
    display: none;
}

.conf-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.conf-status {
    color: var(--halo-gold, #ffe9a8);
    font-size: small;
}

.conf {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid rgba(201, 184, 255, 0.45);
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 14px;
    margin: 14px 0;
}

.conf-head {
    color: #7c7c8c;
    font-size: x-small;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.conf-who {
    color: var(--feather, #ffd6ec);
}

.conf-anon {
    color: #7c7c8c;
    font-style: italic;
}

.conf-when {
    color: #7c7c8c;
}

.conf-body {
    color: #e8e8f2;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 6px 0;
}

.conf-art {
    display: inline-block;
    margin: 8px 0;
}

.conf-art img {
    display: block;
    max-width: min(100%, 460px);
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.conf-reply {
    margin-top: 10px;
    padding: 9px 11px;
    border-left: 3px solid var(--halo-gold, #ffe9a8);
    background: rgba(255, 233, 168, 0.05);
}

.conf-reply-body {
    color: #ffeecd;
    white-space: pre-wrap;
    word-break: break-word;
}

.conf-reply-link {
    display: inline-block;
    margin-top: 6px;
    color: #5bcefa;
    font-size: x-small;
    text-decoration: none;
}

.conf-reply-link:hover {
    text-decoration: underline;
}

.conf-empty {
    color: #7c7c8c;
}

.cw-item {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.02);
    padding: 12px 14px;
    margin: 14px 0;
}

.cw-done {
    border-left: 3px solid rgba(255, 233, 168, 0.5);
}

.cw-head {
    color: #c8c8d4;
    font-size: small;
    margin-bottom: 6px;
}

.cw-answer {
    margin-top: 10px;
    display: grid;
    gap: 7px;
}

.cw-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.cw-btn {
    font: inherit;
    font-size: x-small;
    padding: 5px 11px;
    background: #2e497a;
    border: 1px solid #5bcefa;
    color: white;
    cursor: pointer;
}

.cw-btn:hover {
    box-shadow: 0 0 10px rgba(91, 206, 250, 0.4);
}

.cw-danger {
    background: none;
    border-color: rgba(255, 107, 107, 0.5);
    color: #ff9db0;
}

.cw-danger:hover {
    border-color: #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.4);
}

.cw-status {
    color: var(--halo-gold, #ffe9a8);
    font-size: x-small;
}

/* the share panel on an answered card. it is the last thing on the card, so it
   reads as what to do next rather than as part of the answer. */
.cw-share {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    display: grid;
    gap: 8px;
}

.cw-share-link {
    display: grid;
    gap: 4px;
    font-size: x-small;
    color: #9a9aac;
}

.cw-share-link .cw-btn {
    justify-self: start;
}

.cw-share .cw-tweet {
    width: 100%;
    box-sizing: border-box;
    min-height: 74px;
    resize: vertical;
}

.cw-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cw-share-note {
    font-size: x-small;
}

.cw-card-save {
    border-color: rgba(255, 233, 168, 0.65);
    background: #5a4a1c;
}

.cw-card-save:hover {
    box-shadow: 0 0 10px rgba(255, 233, 168, 0.45);
}

.cw-tweet-go {
    border-color: rgba(255, 214, 236, 0.6);
    background: #5c2f4a;
}

.cw-tweet-go:hover {
    box-shadow: 0 0 10px rgba(255, 214, 236, 0.4);
}

/* zpix, for the card the console draws. it is subset to latin, latin-1 and
   latin extended-a, so it is 5.8 KB rather than the 944 KB the whole face
   weighs. the card renders it at its own twelve pixels and scales the result
   up by whole numbers, which is why nothing here sets a size. */
@font-face {
    font-family: "zpix";
    src: url("/confessions/zpix.woff2") format("woff2");
    font-display: swap;
}