/*
 * Notes — the private notes panel on a Shot (inc/notes.php,
 * assets/js/notes.js).
 *
 * The button sits on the left of the Shot's white foot, in
 * handwriting. The panel opens above the foot, inside the card: the
 * reader's notes on little slips in blue biro, the author's replies
 * in red pen. Caveat comes from short.css, which is always loaded
 * alongside this file.
 */

/* ---------------------------------------------------------------
   The button
   --------------------------------------------------------------- */

.short-foot .note-open {
	margin: 0 auto 0 0.5rem;
	padding: 0.25rem 0.375rem;
	border: 0;
	background: none;
	color: #1f2d6e;
	font-family: "Caveat", "Comic Sans MS", cursive;
	font-size: 1.1875rem;
	line-height: 1;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.short-foot .note-open:hover,
.short-foot .note-open[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------
   The panel
   --------------------------------------------------------------- */

.note-panel {
	padding: 1rem 1.25rem 0.5rem;
	background: var(--tablet);
	border-top: 1px dashed #d9d6cc;
	color: var(--ink);
	font: 15px/1.45 var(--sans);
}

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

.note-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.note-title {
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--ink);
}

.note-help {
	display: inline-grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	padding: 0;
	border: 1px solid #c9c6bc;
	border-radius: 50%;
	background: none;
	color: var(--ink-soft);
	font: 600 0.75rem/1 var(--sans);
	cursor: pointer;
}

.note-help:hover { border-color: var(--ink); color: var(--ink); }

/* Everything under the heading: slips, writing box, buttons. */
.note-body { position: relative; }

.note-wait,
.note-empty {
	margin: 0 0 0.75rem;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------
   Slips: one per note
   --------------------------------------------------------------- */

.note-list:not(:empty) { margin-bottom: 0.875rem; }

.note-slip {
	position: relative;
	margin: 0 0 0.625rem;
	padding: 0.625rem 0.875rem 0.5rem;
	background: #fdfdf8;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 10px rgba(0, 0, 0, 0.06);
	font-family: "Caveat", "Comic Sans MS", cursive;
	font-size: 1.3125rem;
	line-height: 1.2;
}

.note-slip.from-reader { color: #1f2d6e; margin-right: 1.5rem; transform: rotate(-0.6deg); }
.note-slip.from-author { color: #c62d2d; margin-left: 1.5rem; background: #fff8f3; transform: rotate(0.5deg); }

.note-text {
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.note-meta {
	display: block;
	margin-top: 0.25rem;
	font-family: var(--sans);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
}

/* Delete, for the author: two taps, the first asks. */
.note-del {
	position: absolute;
	top: 0.25rem;
	right: 0.375rem;
	padding: 0.125rem 0.25rem;
	border: 0;
	background: none;
	color: #9a9a95;
	font: 0.875rem/1 var(--sans);
	cursor: pointer;
}

.note-del:hover,
.note-del.is-sure { color: #b32d2e; }

/* ---------------------------------------------------------------
   Writing
   --------------------------------------------------------------- */

.note-sign { margin-bottom: 0.5rem; }

/* Under the name box: how to get back to an earlier note. */
.note-hint {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--ink-soft);
}

/* 16px and up, so phones don't zoom in on tap. */
.note-field,
.note-input {
	width: 100%;
	min-width: 0;
	padding: 0.5rem 0.625rem;
	border: 1px solid #d6d3c9;
	border-radius: 6px;
	background: #fff;
	color: var(--ink);
	font: 16px/1.4 var(--sans);
}

.note-field:focus,
.note-input:focus { outline: 2px solid #1f2d6e; outline-offset: 0; border-color: transparent; }

.note-write { position: relative; }

.note-input {
	display: block;
	resize: vertical;
	min-height: 4.5rem;
	font-family: "Caveat", "Comic Sans MS", cursive;
	font-size: 1.3125rem;
	line-height: 1.25;
	color: #1f2d6e;
}

.note-count {
	position: absolute;
	right: 0.5rem;
	bottom: 0.375rem;
	font: 0.6875rem/1 var(--mono);
	color: #a3a39e;
	pointer-events: none;
}

.note-count.is-over { color: #b32d2e; }

/* The trap for bots: there, but never seen or reached by people. */
.note-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.note-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.875rem;
	margin-top: 0.5rem;
}

.note-send {
	padding: 0.4375rem 1rem;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font: 600 0.8125rem/1.2 var(--sans);
	letter-spacing: 0.04em;
	cursor: pointer;
}

.note-send:disabled { opacity: 0.5; cursor: default; }

.note-link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink-soft);
	font: 0.8125rem/1.3 var(--sans);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.note-link:hover { color: var(--ink); }

.note-as {
	font-size: 0.8125rem;
	color: var(--ink-soft);
}

.note-error {
	margin: 0.5rem 0 0;
	min-height: 1.2em;
	font-size: 0.8125rem;
	color: #b32d2e;
}

/* ---------------------------------------------------------------
   The author's view: one block per reader
   --------------------------------------------------------------- */

.note-thread {
	margin: 0 0 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed #e3e1d8;
}

.note-thread:last-child { border-bottom: 0; }

.note-thread-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.625rem;
	margin-bottom: 0.625rem;
}

.note-sign-name {
	font-weight: 600;
	font-size: 0.9375rem;
}

.note-badge {
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: #fbe3e3;
	color: #b32d2e;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.note-badge.is-blocked { background: #ececea; color: var(--ink-soft); }

/* Waiting for a reply (the reader had the last word): the name in red. */
.note-thread.is-waiting .note-sign-name { color: #b32d2e; }

/* ---------------------------------------------------------------
   The "?" pop-up
   --------------------------------------------------------------- */

.note-dialog {
	width: min(26rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 4rem);
	padding: 1.5rem 1.5rem 1.25rem;
	border: 0;
	border-radius: var(--radius);
	background: #fdfdf8;
	color: var(--ink);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	overflow-y: auto;
	font: 16px/1.55 var(--sans);
}

.note-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.note-dialog-text p + p { margin-top: 0.75em; }

.note-dialog-close {
	display: block;
	margin: 1.25rem 0 0 auto;
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	color: #fff;
	font: 600 0.875rem/1.2 var(--sans);
	cursor: pointer;
}