/* Ash Legion Dead Drops & Secure Channel. Gold on dark, to match the site. */
.ash-dd {
	--dd-gold: #c9a227;
	--dd-gold-soft: #e0b93a;
	--dd-ink: #f2f2f2;
	--dd-muted: #a39e93;
	--dd-panel: #1a1816;
	--dd-line: #3a3428;
	color: var(--dd-ink);
	max-width: 760px;
	margin: 0 auto;
	padding: 0 16px 40px;
	box-sizing: border-box;
}
.ash-dd *, .ash-dd *::before, .ash-dd *::after { box-sizing: border-box; }

.ash-dd-title { color: var(--dd-gold); letter-spacing: .08em; text-transform: uppercase; margin: 16px 0 6px; }
.ash-dd-intro { color: var(--dd-muted); margin: 0 0 18px; }

.ash-dd-notice { padding: 12px 16px; border-left: 4px solid var(--dd-gold); background: var(--dd-panel); border-radius: 4px; margin: 0 0 18px; }
.ash-dd-notice--err { border-left-color: #c0392b; }

.ash-dd-form { display: grid; gap: 14px; background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 6px; padding: 18px; margin-bottom: 22px; }
.ash-dd-field { display: grid; gap: 6px; font-weight: 600; }
.ash-dd-opt { color: var(--dd-muted); font-weight: 400; }
.ash-dd-field input, .ash-dd-field select, .ash-dd-field textarea {
	width: 100%;
	background: #111;
	color: var(--dd-ink);
	border: 1px solid var(--dd-line);
	border-radius: 4px;
	padding: 10px 12px;
	font: inherit;
}
.ash-dd-field input:focus, .ash-dd-field select:focus, .ash-dd-field textarea:focus { outline: 2px solid var(--dd-gold); outline-offset: 1px; }
.ash-dd-field textarea { resize: vertical; }

.ash-dd-btn {
	justify-self: start;
	background: var(--dd-gold);
	color: #141210;
	border: 0;
	border-radius: 4px;
	padding: 10px 18px;
	font: inherit;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
}
.ash-dd-btn:hover { background: var(--dd-gold-soft); }

/* Robots fill this in; people never see it. */
.ash-dd-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.ash-dd-lock { background: var(--dd-panel); border: 1px dashed var(--dd-line); border-radius: 6px; padding: 14px 16px; color: var(--dd-muted); margin: 0 0 22px; }
.ash-dd-lock a { color: var(--dd-gold); }

.ash-dd-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.ash-dd-filter { color: var(--dd-gold); text-decoration: none; border: 1px solid var(--dd-gold); border-radius: 999px; padding: 4px 12px; font-size: .9em; }
.ash-dd-filter.is-on, .ash-dd-filter:hover { background: var(--dd-gold); color: #141210; }

.ash-dd-empty { color: var(--dd-muted); font-style: italic; }

.ash-dd-list { display: grid; gap: 12px; }
.ash-dd-card {
	display: flex;
	gap: 16px;
	background: var(--dd-panel);
	border: 1px solid var(--dd-line);
	border-radius: 6px;
	padding: 14px 16px;
}
.ash-dd-card--declined { opacity: .6; }
.ash-dd-card-main { flex: 1; min-width: 0; }
.ash-dd-card-title { margin: 0 0 4px; font-size: 1.1em; overflow-wrap: anywhere; }
.ash-dd-meta { color: var(--dd-muted); font-size: .88em; margin: 0 0 8px; }
.ash-dd-tag, .ash-dd-status {
	display: inline-block;
	border-radius: 3px;
	padding: 1px 7px;
	margin-right: 6px;
	font-size: .85em;
}
.ash-dd-tag { background: #2a2620; color: var(--dd-ink); }
.ash-dd-status { color: var(--dd-gold); border: 1px solid var(--dd-gold); }
.ash-dd-card--done .ash-dd-status { background: var(--dd-gold); color: #141210; }
.ash-dd-details { margin: 0; color: #d8d4cb; overflow-wrap: anywhere; }

.ash-dd-card-side { flex: 0 0 auto; }
.ash-dd-vote {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 88px;
	background: transparent;
	color: var(--dd-gold);
	border: 1px solid var(--dd-gold);
	border-radius: 6px;
	padding: 8px 10px;
	font: inherit;
	cursor: pointer;
}
.ash-dd-vote:disabled { opacity: .5; cursor: not-allowed; }
.ash-dd-vote.is-on { background: var(--dd-gold); color: #141210; }
.ash-dd-count { font-size: 1.4em; font-weight: 700; line-height: 1.1; }

@media (max-width: 560px) {
	.ash-dd-card { flex-direction: column; }
	.ash-dd-card-side { align-self: flex-start; }
}