/* ============================================================
   Anti Radio Memories — v1.0.0
   ============================================================ */

.armem {
	--arm-pink:   #ff2e88;
	--arm-bg:     #111111;
	--arm-surface:#1c1c1c;
	--arm-border: #2a2a2a;
	--arm-ink:    #f0f0f0;
	--arm-dim:    rgba(240,240,240,.45);
	--arm-radius: 6px;

	font-family: 'Courier New', Courier, monospace;
	background:  var(--arm-bg);
	border:      1.5px solid var(--arm-border);
	border-radius: var(--arm-radius);
	padding:     22px 20px 16px;
	max-width:   100%;
	width:       100%;
	color:       var(--arm-ink);
	box-sizing:  border-box;
}

/* Light mode override */
body:not(.site-dark) .armem {
	--arm-bg:      #f7f7f7;
	--arm-surface: #ffffff;
	--arm-border:  #ddd;
	--arm-ink:     #111111;
	--arm-dim:     rgba(0,0,0,.45);
}

/* ── Header ─────────────────────────────────────────────── */
.armem__head {
	display:         flex;
	align-items:     center;
	gap:             8px;
	margin-bottom:   16px;
	padding-bottom:  12px;
	border-bottom:   1.5px solid var(--arm-border);
}

.armem__icon {
	font-size:   18px;
	color:       var(--arm-pink);
	flex-shrink: 0;
}

.armem__title {
	font-size:      12px;
	font-weight:    bold;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color:          var(--arm-pink);
	flex:           1;
	min-width:      0;
}

.armem__date {
	font-size:      11px;
	color:          var(--arm-dim);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	white-space:    nowrap;
}

/* ── List ───────────────────────────────────────────────── */
.armem__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        8px;
}

/* ── Item — card layout ─────────────────────────────────── */
.armem--card .armem__item {
	cursor:        pointer;
	display:       flex;
	align-items:   flex-start;
	gap:           12px;
	padding:       10px 12px;
	background:    var(--arm-surface);
	border:        1px solid var(--arm-border);
	border-radius: var(--arm-radius);
	transition:    border-color .18s, background .18s;
}

.armem--card .armem__item:hover {
	border-color: var(--arm-pink);
	background:   color-mix(in srgb, var(--arm-pink) 5%, var(--arm-surface));
}

/* ── Item — list layout ─────────────────────────────────── */
.armem--list .armem__item {
	cursor:        pointer;
	display:       flex;
	align-items:   flex-start;
	gap:           12px;
	padding:       9px 0;
	border-bottom: 1px solid var(--arm-border);
}

.armem--list .armem__item:last-child {
	border-bottom: none;
}

/* ── Thumb ──────────────────────────────────────────────── */
.armem__thumb {
	width:         44px;
	height:        44px;
	flex-shrink:   0;
	object-fit:    cover;
	border-radius: 4px;
	border:        1px solid var(--arm-border);
	background:    var(--arm-border);
	filter:        grayscale(1);
	transition:    filter .2s;
}
.armem__item:hover .armem__thumb { filter: none; }

/* ── Label ──────────────────────────────────────────────── */
.armem__label {
	font-size:      9.5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color:          var(--arm-dim);
	line-height:    1;
	margin-bottom:  2px;
}
.armem__item--birthday .armem__label { color: #d97706; }
.armem__item--event    .armem__label { color: var(--arm-pink); }

/* ── Badge ──────────────────────────────────────────────── */
.armem__badge {
	width:           44px;
	height:          44px;
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       20px;
	line-height:     1;
	border-radius:   4px;
	border:          1px solid var(--arm-border);
	background:      var(--arm-surface);
	user-select:     none;
}

/* ── Content ────────────────────────────────────────────── */
.armem__content {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	flex:           1;
	min-width:      0;
}

.armem__name {
	font-size:       13px;
	font-weight:     bold;
	color:           var(--arm-ink) !important;
	text-decoration: none !important;
	line-height:     1.35;
	display:         -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:        hidden;
	overflow-wrap:   anywhere;
}
.armem__item:hover .armem__name,
.armem__item:focus-visible .armem__name { color: var(--arm-pink) !important; }
.armem__item:focus-visible { outline: 2px solid var(--arm-pink); outline-offset: 2px; }

.armem__info {
	font-size:     12px;
	color:         var(--arm-dim);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.armem__meta {
	display:     flex;
	align-items: center;
	gap:         5px;
	margin-top:  3px;
}

.armem__year {
	font-size:  13px;
	color:      var(--arm-pink);
	font-weight: bold;
}

.armem__ago {
	font-size: 11.5px;
	color:     var(--arm-dim);
}

/* ── Birthday accent ────────────────────────────────────── */
.armem--card .armem__item--birthday {
	border-left: 3px solid #f59e0b;
}

.armem--card .armem__item--event {
	border-left: 3px solid var(--arm-pink);
}

/* ── Empty ──────────────────────────────────────────────── */
.armem__empty {
	font-size:  13px;
	color:      var(--arm-dim);
	font-style: italic;
	margin:     0;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 480px) {
	.armem          { padding: 14px 12px 12px; }
	.armem__name    { font-size: 13px; }
	.armem__badge   { font-size: 17px; }
}

/* ── Modal ──────────────────────────────────────────────── */
html.armem-lock { overflow: hidden; }

.armem-modal {
	position: fixed; inset: 0; z-index: 99999;
	display: none;
	font-family: 'Courier New', Courier, monospace;
}
.armem-modal.is-open { display: block; }

.armem-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(0,0,0,.78);
	backdrop-filter: blur(3px);
}

.armem-modal__box {
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	width: min(680px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: #111;
	color: #f0f0f0;
	border: 1.5px solid #2a2a2a;
	border-top: 3px solid #ff2e88;
	border-radius: 6px;
	box-shadow: 0 30px 80px rgba(0,0,0,.6);
	outline: none;
	animation: armemIn .18s ease-out;
}
@keyframes armemIn { from { opacity:0; transform: translate(-50%,-48%);} to { opacity:1; transform: translate(-50%,-50%);} }

.armem-modal__close {
	position: absolute; top: 10px; right: 12px; z-index: 2;
	width: 34px; height: 34px;
	background: rgba(0,0,0,.6) !important;
	color: #fff !important;
	border: 1px solid #333 !important;
	border-radius: 4px;
	font-size: 22px; line-height: 1;
	cursor: pointer; padding: 0 !important;
}
.armem-modal__close:hover { background: #ff2e88 !important; border-color: #ff2e88 !important; }

.armem-modal__media {
	width: 100%; max-height: 320px; overflow: hidden;
	background: #000;
}
.armem-modal__media img {
	display: block; width: 100%; height: 320px;
	object-fit: cover; object-position: center 20%;
}

.armem-modal__text { padding: 22px 24px 26px; }

.armem-modal__label {
	display: block;
	font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
	color: #ff2e88; margin-bottom: 8px;
}
.armem-modal__title {
	margin: 0 0 6px !important;
	font-family: inherit !important;
	font-size: 22px !important; line-height: 1.2 !important;
	color: #fff !important;
}
.armem-modal__info {
	margin: 0 0 14px !important;
	font-size: 12.5px; color: rgba(240,240,240,.55);
}
.armem-modal__event {
	margin: 0 0 12px !important;
	padding: 10px 12px;
	border-left: 3px solid #ff2e88;
	background: #1c1c1c;
	font-size: 13.5px; line-height: 1.5; color: #f0f0f0;
}
.armem-modal__extract {
	margin: 0 !important;
	font-size: 14px; line-height: 1.65; color: #ddd;
}

@media (max-width: 520px) {
	.armem-modal__media img { height: 200px; }
	.armem-modal__text { padding: 16px; }
	.armem-modal__title { font-size: 18px !important; }
}