.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,
.conf-comment-form input[type="text"],
.conf-comment-form 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,
.conf-comment-form 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;
}

/* ---- the voices --------------------------------------------------------- */

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

/* amen and comment. both were easy to miss at x-small with a faint border on a
   dark page, which is not much of an invitation. these are the two things a
   reader can do here, so they are the size of things you can do.

   square, and the same measurements as every other button on the page: the site
   has no rounded corners anywhere, and a pill in the middle of it reads as
   borrowed from somewhere else. */
.conf-amen,
.conf-say {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: small;
    padding: 7px 13px;
    border-radius: 0;
    background: #241a3a;
    color: #e8e0ff;
    border: 2px solid rgba(201, 184, 255, 0.7);
    cursor: pointer;
}

.conf-amen:hover,
.conf-say:hover {
    box-shadow: 0 0 12px rgba(201, 184, 255, 0.45);
    transform: translateY(-1px);
}

.conf-amen.is-on {
    color: #0b0b14;
    background: var(--halo-gold, #ffe9a8);
    border-color: var(--halo-gold, #ffe9a8);
    box-shadow: 0 0 12px rgba(255, 233, 168, 0.45);
}

.conf-amen-n,
.conf-say-n {
    font-variant-numeric: tabular-nums;
    opacity: 0.9;
}

/* the comment box, over the wall rather than down it */
.conf-dialog {
    width: min(92vw, 620px);
    max-height: 86vh;
    overflow-y: auto;
    margin: auto;
    padding: 20px 24px 18px;
    background: #0a0a12;
    color: #e8e8f2;
    border: 2px solid rgba(201, 184, 255, 0.45);
    border-radius: 0;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8);
}

.conf-dialog::backdrop {
    background: rgba(3, 3, 6, 0.82);
    backdrop-filter: blur(3px);
}

.conf-dialog-x {
    float: right;
    font: inherit;
    font-size: small;
    line-height: 1;
    padding: 4px 9px;
    background: none;
    color: #9a9aac;
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
}

.conf-dialog-x:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
}

.conf-dialog-title {
    margin: 0 0 12px;
    font-size: medium;
    font-weight: 400;
}

.conf-dialog-quote {
    margin: 0 0 14px;
    padding-left: 10px;
    border-left: 2px solid rgba(201, 184, 255, 0.35);
    color: #a9a9bb;
    font-size: small;
    line-height: 1.6;
}

.conf-dialog-voices {
    max-height: 30vh;
    overflow-y: auto;
    margin-bottom: 16px;
}

.conf-dialog-voices .conf-comments {
    margin-bottom: 0;
}

/* the comments, in the console, where she can do something about them. a held
   one is edged in amber so it is obvious which of these are waiting for her. */
.cw-voice {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 3px solid rgba(201, 184, 255, 0.4);
    background: rgba(255, 255, 255, 0.02);
    padding: 10px 12px;
    margin: 12px 0;
}

.cw-voice[data-state="flagged"] {
    border-left-color: rgba(255, 159, 67, 0.75);
}

.cw-voice .conf-body {
    margin: 6px 0 8px;
}

/* the comments under one confession, which only ever live on its own page:
   forty boxes in a feed is not a page anyone can read */
.conf-voices {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.conf-comments {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.conf-comment {
    padding: 9px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}

.conf-comment-head {
    font-size: x-small;
    margin-bottom: 3px;
}

.conf-comment-reply {
    color: #7c7c8c;
    margin-right: 5px;
}

.conf-comment-body {
    margin: 0;
    line-height: 1.7;
}

.conf-comments-empty {
    color: #7c7c8c;
    font-size: small;
    margin: 0 0 16px;
}

.conf-comment-form {
    display: grid;
    gap: 10px;
}

.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: 0;
    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);
}

/* the choice about the picture the confession came with. it only appears when
   there is one, and it starts unticked: publishing is the direction that cannot
   be taken back, and a picture she meant to keep can be shown later by editing
   the answer. */
.cw-showpic {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: x-small;
    color: #c8c8d4;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
}

.cw-showpic input {
    accent-color: var(--halo-gold, #ffe9a8);
}

/* what the word filter thought of it. it decides nothing, so it is a note
   rather than an alarm. */
.badge.warn {
    background: none;
    border: 1px solid rgba(255, 159, 67, 0.6);
    color: #ffb877;
}

/* changing an answer happens underneath it, so she can see what she is changing
   it from while she does it */
.cw-editform {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
}

.cw-morebox {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* 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;
}

/* mobile: confession metadata and hint lines were 10px on phones. desktop
   rules above are untouched. */
@media (max-width: 800px) {
    .conf-hint,
    .conf-who,
    .conf-permalink,
    .conf-reply-link {
        font-size: 12px;
    }
}