/* ==========================================================================
   Widgets: the show calendar (os/calendar.js) and the volume fader (os/volume.js)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Calendar
   -------------------------------------------------------------------------- */
.cal {
	--cell: 34px;
	display: grid;
	gap: 6px;
	width: calc(var(--cell) * 7 + 24px);
	padding: 0 12px 12px;
	color: var(--white);
	-webkit-user-select: none;
	user-select: none;
}
.cal__head {
	display: grid;
	grid-template-columns: 30px 1fr 30px;
	align-items: center;
	margin: 0 -12px;
	padding: 6px 8px;
	border-bottom: 2px solid var(--red);
	background: linear-gradient(100deg, var(--red) 0%, #b42727 40%, #2a0404 100%);
}
.cal__title {
	font-family: var(--f-display);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--white);
	text-shadow: 0 1px 0 rgb(0 0 0 / 0.5);
}
.cal__nav { display: grid; place-items: center; width: 30px; height: 26px; color: var(--white); }
.cal__nav .pd-glyph { width: 14px; height: 14px; }
.cal__nav:hover,
.cal__title:hover { color: var(--black); }
.cal__nav:active { transform: scale(0.88); }

.cal__days,
.cal__grid { display: grid; grid-template-columns: repeat(7, var(--cell)); }
.cal__days { margin-top: 4px; font-family: var(--f-num); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); text-align: center; }
.cal__grid { grid-auto-rows: 30px; min-height: 180px; align-content: start; transform-origin: 50% 0; }
.cal__grid.is-turning-on { animation: cal-turn-on 0.26s var(--ease-out); }
.cal__grid.is-turning-back { animation: cal-turn-back 0.26s var(--ease-out); }
@keyframes cal-turn-on { from { opacity: 0; transform: translateX(14px) skewX(-4deg); } }
@keyframes cal-turn-back { from { opacity: 0; transform: translateX(-14px) skewX(4deg); } }

.cal__cell {
	position: relative;
	display: grid;
	place-items: center;
	margin: 1px;
	font-family: var(--f-num);
	font-size: 12px;
	font-weight: 500;
	color: var(--pink);
}
.cal__cell.is-today { background: var(--red); color: var(--black); font-weight: 800; box-shadow: var(--glow); }
/* A show night: boxed, with a notch in the corner. Still to come glows; played is dim. */
.cal__cell.has-show { border: 1.5px solid var(--red-mid); color: var(--white); font-weight: 800; }
.cal__cell.has-show::after { content: ''; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; background: var(--red-mid); }
.cal__cell.has-show.is-ahead { border-color: var(--red); box-shadow: var(--glow); animation: cal-pulse 1.8s ease-in-out infinite; }
.cal__cell.has-show.is-ahead::after { background: var(--white); }
.cal__cell.has-show:hover,
.cal__cell.has-show.is-picked { background: var(--blush); border-color: var(--white); color: var(--black); }
@keyframes cal-pulse { 50% { box-shadow: var(--glow-strong); } }

.cal__agenda { display: grid; gap: 6px; padding-top: 8px; border-top: 1.5px solid var(--red-deep); }
.cal__label { margin: 0; font-family: var(--f-num); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); text-shadow: var(--text-glow); }
.cal__empty { margin: 0; font-size: 19px; line-height: 1.1; color: var(--blush); }
.cal__last { justify-self: start; padding: 0; font-size: 17px; color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.cal__last:hover { color: var(--white); }
.cal__show {
	display: grid;
	grid-template-columns: 40px 1fr;
	gap: 2px 10px;
	align-items: center;
	padding: 6px;
	border: 1.5px solid var(--red-deep);
	background: rgb(255 69 69 / 0.06);
	color: var(--white);
	text-decoration: none;
}
.cal__show:hover { border-color: var(--red); background: rgb(255 69 69 / 0.18); }
.cal__show.is-ahead { border-color: var(--red); box-shadow: var(--glow); }
.cal__show-date { grid-row: 1 / 3; display: grid; justify-items: center; font-family: var(--f-num); font-size: 7px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pink); }
.cal__show-date b { font-size: 19px; line-height: 1; color: var(--red); text-shadow: var(--text-glow); }
.cal__show-text { display: grid; min-width: 0; line-height: 1.05; }
.cal__show-title { font-size: 18px; }
.cal__show-where { font-size: 16px; color: var(--pink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal__show-tag { grid-column: 2; font-family: var(--f-num); font-size: 8px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.cal__show.is-ahead .cal__show-tag { color: var(--white); }

/* In its own window, or a sheet on a phone. */
.calapp { display: grid; align-content: start; flex: 1; padding: 0 0 16px; background: var(--panel); }
.calapp .cal { --cell: 46px; width: 100%; }
.calapp .cal__days,
.calapp .cal__grid { justify-content: center; }
.calapp .cal__grid { grid-auto-rows: 42px; min-height: 252px; }
.calapp .cal__cell { font-size: 15px; }
.calapp .cal__title { font-size: 16px; }
.calapp .cal__head { padding: 10px 8px; }
.calapp .cal__nav { height: 34px; }
@media (max-width: 899px) {
	.calapp .cal { --cell: min(46px, calc((100vw - 32px) / 7)); width: 100vw; padding: 0 16px 16px; }
	.calapp .cal__head { margin: 0 -16px; }
	.calapp .cal__days,
	.calapp .cal__grid { justify-content: center; }
}

/* The phone's home screen card that opens it. */
.phone__cal {
	display: grid;
	grid-template-columns: 54px 1fr 28px;
	align-items: center;
	gap: 14px;
	padding: 10px 14px 10px 10px;
	border: 2px solid var(--red);
	border-radius: 2px;
	background:
		repeating-linear-gradient(0deg, rgb(255 69 69 / 0.05) 0 1px, transparent 1px 3px),
		rgb(10 0 0 / 0.88);
	box-shadow: var(--glow);
	color: var(--white);
	text-decoration: none;
}
.phone__cal:active { transform: scale(0.985); }
.phone__cal-tile { display: grid; grid-template-rows: 16px 1fr; width: 54px; height: 54px; border: 2px solid var(--red); background: var(--blush); text-align: center; }
.phone__cal-tile b { background: var(--red); color: var(--black); font-family: var(--f-num); font-size: 9px; font-weight: 800; line-height: 15px; letter-spacing: 0.1em; text-transform: uppercase; }
.phone__cal-tile i { align-self: center; color: var(--black); font-family: var(--f-num); font-size: 22px; font-style: normal; font-weight: 800; line-height: 1; }
.phone__cal-text { display: grid; min-width: 0; line-height: 1.1; }
.phone__cal-label { font-family: var(--f-num); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); text-shadow: var(--text-glow); }
.phone__cal-title { font-size: 21px; }
.phone__cal-sub { font-size: 17px; color: var(--pink); }
.phone__cal .phone-link__go { grid-column: 3; grid-row: 1; }

/* --------------------------------------------------------------------------
   Volume fader
   -------------------------------------------------------------------------- */
.taskbar__tray { position: relative; }
.vol {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	z-index: 5002;
	display: grid;
	justify-items: center;
	gap: 6px;
	width: 76px;
	padding: 10px 8px 8px;
	border: 2px solid var(--red);
	background: #050000;
	box-shadow: var(--glow-strong), 0 20px 60px rgb(0 0 0 / 0.8);
	transform-origin: 50% 100%;
	animation: vol-in 0.2s var(--ease-out);
}
.vol[hidden] { display: none; }
@keyframes vol-in { from { opacity: 0; transform: translateY(8px) scaleY(0.8); } }
.vol__label { margin: 0; font-family: var(--f-num); font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red); }
.vol__num { font-family: var(--f-num); font-size: 26px; font-weight: 800; line-height: 1; color: var(--white); text-shadow: var(--text-glow-white); }
.vol.is-muted .vol__num { color: var(--red-deep); text-shadow: none; }
/* 11: one louder. */
.vol.is-eleven { animation: vol-rattle 0.09s steps(2) infinite; }
.vol.is-eleven .vol__num { color: var(--red); text-shadow: var(--glow-strong); }
@keyframes vol-rattle { 50% { transform: translate(1px, -1px); } }
[data-motion='reduce'] .vol.is-eleven { animation: none; }

/* The range input is turned on its side; the slot holds the space it then takes up. */
.vol__slot { position: relative; width: 56px; height: 150px; }
.vol__fader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150px;
	margin: 0;
	transform: translate(-50%, -50%) rotate(-90deg);
	touch-action: none;
}
.vol__fader::-webkit-slider-thumb { width: 14px; height: 26px; margin-top: -11px; }
.vol__fader::-moz-range-thumb { width: 12px; height: 24px; }
.vol.is-muted .vol__fader { opacity: 0.4; }
.vol__ticks { position: absolute; inset: 6px auto 6px 4px; display: grid; align-content: space-between; }
.vol__ticks i { display: block; width: 6px; height: 1.5px; background: var(--red-deep); }
.vol__ticks i.is-top { width: 10px; background: var(--red); box-shadow: var(--glow); }
.vol__mute {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 28px;
	border: 1.5px solid var(--red-deep);
	color: var(--white);
	font-family: var(--f-num);
	font-size: 8px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.vol__mute .pd-glyph { width: 14px; height: 14px; }
.vol__mute:hover { border-color: var(--red); background: rgb(255 69 69 / 0.2); }
.vol__mute[aria-pressed='true'] { background: var(--red); border-color: var(--red); color: var(--black); }
.tray-btn.is-muted { color: var(--red); }

/* Phone: the speaker sits in the status bar and the fader drops down from it. */
.phone__vol { color: var(--white); }
.phone__vol .pd-glyph { width: 20px; height: 20px; }
.phone__vol.is-muted { color: var(--red); }
.phone__status .vol { top: calc(100% + 6px); right: 12px; bottom: auto; transform-origin: 50% 0; }
.phone__status .vol__slot { height: 170px; }
.phone__status .vol__fader { width: 170px; }
.phone__status .vol__mute { height: 36px; }