/* One column down the right edge, 8px in; below the site header on pages that show it. */
.mahanani-kartu-aksi {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: fixed;
	right: 8px;
	top: 8px;
	z-index: 998;
}

body:not(.mahanani-hide-header) .mahanani-kartu-aksi {
	top: calc(var(--yt-header-tinggi, 60px) + 8px);
}

.mahanani-kartu-aksi button,
.mahanani-kartu-aksi a {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	text-decoration: none;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: #1d2327;
	cursor: pointer;
	font-size: 14px;
	height: 36px;
	line-height: 1;
	padding: 0 12px;
}

/* Every button in the column the same width, so the column's right edge stays straight. */
.mahanani-kartu-aksi > button,
.mahanani-kartu-aksi > a,
.mahanani-kartu-aksi > .mahanani-kartu-menu > .mahanani-kartu-buka {
	justify-content: center;
	padding: 0 6px;
	width: 44px;
}

/* The S button says "Menyimpan…" and "Tersimpan" for a moment; it widens to the left meanwhile. */
.mahanani-kartu-aksi > button[data-simpan] {
	min-width: 44px;
	white-space: nowrap;
	width: auto;
}

.mahanani-kartu-grup {
	display: flex;
	gap: 4px;
}

/* Visitors' D buttons: in the site header, left of the sign-in or account icon, and in the burger menu. */
.mahanani-kartu-d {
	align-items: center;
	display: flex;
	gap: 4px;
}

.mahanani-kartu-d.is-header {
	margin-right: 8px;
	max-width: 40vw;
	overflow-x: auto;
}

.mahanani-kartu-d.is-burger {
	flex-wrap: wrap;
	padding: 12px 16px;
}

.mahanani-kartu-d-judul {
	font-size: 13px;
	font-weight: 600;
	margin-right: 4px;
	width: 100%;
}

.mahanani-kartu-d button {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	flex: none;
	font-size: 13px;
	height: 32px;
	min-width: 36px;
	padding: 0 8px;
}

.mahanani-kartu-d button[aria-pressed="true"] {
	background: #1d2327;
	border-color: #1d2327;
	color: #fff;
}

/* A button that opens a small list to its left, level with it. */
.mahanani-kartu-menu {
	position: relative;
}

.mahanani-kartu-daftar {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(29, 35, 39, .16);
	display: flex;
	gap: 4px;
	padding: 6px;
	position: absolute;
	right: calc(100% + 4px);
	top: -6px;
	z-index: 1;
}

.mahanani-kartu-daftar[hidden] {
	display: none;
}

/* The ⋯ list holds the design tools, one under another. */
.mahanani-kartu-daftar.is-kolom,
.mahanani-kartu-daftar.is-kolom .mahanani-kartu-grup {
	align-items: stretch;
	flex-direction: column;
	min-width: 180px;
}

/* Every link inside a card, on every board, looks like the card's own text: no link colour and no
   underline, pointed at or not. */
.mahanani-kartu-meja .mahanani-kartu-item a,
.mahanani-kartu-meja .mahanani-kartu-item a:visited,
.mahanani-kartu-meja .mahanani-kartu-item a:hover,
.mahanani-kartu-meja .mahanani-kartu-item a:focus,
.mahanani-kartu-meja .mahanani-kartu-item a:active {
	color: inherit;
	text-decoration: none;
}

/* The list behind the book icon opens under it, inside the same list, in two columns: on a Buku
   it is long. */
.mahanani-kartu-sub {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(2, minmax(max-content, 1fr));
	padding-left: 12px;
}

.mahanani-kartu-sub[hidden] {
	display: none;
}

/* The screens button shows only the icon of the screen being arranged. */
.mahanani-kartu-buka.is-varian span {
	display: none;
}

.mahanani-kartu-buka.is-varian[data-aktif="p"] span[data-ikon="p"],
.mahanani-kartu-buka.is-varian[data-aktif="t"] span[data-ikon="t"],
.mahanani-kartu-buka.is-varian[data-aktif="h"] span[data-ikon="h"] {
	display: inline-flex;
}

.mahanani-kartu-orientasi {
	display: flex;
	gap: 4px;
}

.mahanani-kartu-orientasi button {
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: #1d2327;
	cursor: pointer;
	font-size: 12px;
	padding: 4px 8px;
}

.mahanani-kartu-orientasi button[aria-pressed="true"] {
	background: #1d2327;
	border-color: #1d2327;
	color: #fff;
}

.mahanani-kartu-rata-teks {
	align-items: center;
	flex-wrap: wrap;
}

.mahanani-kartu-rata-teks span {
	margin-right: 4px;
}

.mahanani-kartu-daftar.is-kolom select {
	max-width: none;
	width: 100%;
}

.mahanani-kartu-aksi .mahanani-kartu-buka[aria-expanded="true"] {
	border-color: #1d2327;
}

.mahanani-kartu-aksi select {
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: #1d2327;
	font-size: 14px;
	height: 36px;
	max-width: 180px;
	padding: 0 8px;
}

.mahanani-kartu-hapus {
	background: #fff;
	border: 1px solid #b32d2e;
	border-radius: 4px;
	color: #b32d2e;
	cursor: pointer;
	font-size: 12px;
	padding: 4px 8px;
}

/* The layout on screen. */
.mahanani-kartu-aksi button[aria-pressed="true"] {
	background: #1d2327;
	border-color: #1d2327;
	color: #fff;
}

.mahanani-kartu-aksi button:disabled {
	cursor: wait;
	opacity: .6;
}

.mahanani-kartu-aksi button.is-gagal {
	border-color: #b32d2e;
	color: #b32d2e;
}

/* A page is a card board: it does not scroll, and the default template's title and content are hidden. */
html:has(body.mahanani-kanvas),
body.mahanani-kanvas {
	overflow: hidden;
	overscroll-behavior: none;
}

body.mahanani-kanvas .site-main {
	display: none;
}

/* The screen onto the board. Press and drag on empty board to move it. */
.mahanani-kartu-meja {
	cursor: grab;
	inset: 0;
	isolation: isolate;
	overflow: hidden;
	position: fixed;
	touch-action: none;
	user-select: none;
}

/* Below the site header, which stays on screen. */
body:not(.mahanani-hide-header) .mahanani-kartu-meja {
	top: calc(var(--yt-admin-bar, 0px) + var(--yt-header-tinggi, 60px));
}

.mahanani-kartu-meja.is-geser {
	cursor: grabbing;
}

/* Three 16:9 tiles each way, each 1000 units wide. The script moves and scales it. */
.mahanani-kartu-papan {
	height: 1687.5px;
	left: 0;
	outline: 1px solid rgba(29, 35, 39, .12);
	position: absolute;
	top: 0;
	transform-origin: 0 0;
	width: 3000px;
}

/* The board's background picture: over its colour, under everything else, moving with the board. */
.mahanani-kartu-papan-gambar {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: -1;
}

/* The centre tile, where a page opens, marked for its managers only. */
.mahanani-kartu-meja.is-pengelola .mahanani-kartu-papan::before {
	border: 2px dashed rgba(29, 35, 39, .25);
	box-sizing: border-box;
	content: '';
	height: var(--bingkai-t, 562.5px);
	left: 1000px;
	pointer-events: none;
	position: absolute;
	top: 562.5px;
	width: var(--bingkai-l, 1000px);
}

/* The Tablet or HP screen's outline, fixed on the window while the board moves under it. Managers only. */
.mahanani-kartu-bingkai-layar {
	border: 2px dashed rgba(34, 113, 177, .6);
	box-sizing: border-box;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}

.mahanani-kartu-bingkai-layar::after {
	background: rgba(34, 113, 177, .85);
	color: #fff;
	content: attr(data-layar);
	font-size: 11px;
	left: 0;
	line-height: 1;
	padding: 3px 6px;
	position: absolute;
	top: 0;
}

.mahanani-kartu-bingkai-layar[hidden],
.mahanani-kartu-meja.is-garis-sembunyi .mahanani-kartu-bingkai-layar {
	display: none;
}

/* A card hidden on this screen: gone for visitors, faint for those arranging it. */
.mahanani-kartu-item.is-sembunyi {
	display: none;
}

.mahanani-kartu-meja.is-pengelola .mahanani-kartu-item.is-sembunyi {
	display: block;
	opacity: .35;
}

.mahanani-kartu-item {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(29, 35, 39, .12);
	box-sizing: border-box;
	overflow: hidden;
	position: absolute;
}

.mahanani-kartu-item.sudut-siku {
	border-radius: 0;
}

/* A featured-image card is the picture itself, edge to edge. */
.mahanani-kartu-item.is-unggulan .mahanani-kartu-isi {
	overflow: hidden;
	padding: 0;
}

.mahanani-kartu-item.is-unggulan .mahanani-kartu-el-gambar {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* The picture fills the card; whatever does not fit is cropped. */
.mahanani-kartu-foto {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.mahanani-kartu-teks {
	box-sizing: border-box;
	color: #1d2327;
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	z-index: 1;
}

.mahanani-kartu-isi {
	background: transparent;
	border: 0;
	box-sizing: border-box;
	color: inherit;
	display: block;
	font-family: inherit;
	margin: 0;
	outline: 0;
	overflow-wrap: anywhere;
	overflow-y: auto;
	padding: 8px 12px;
	resize: none;
	white-space: pre-wrap;
	width: 100%;
}

.mahanani-kartu-isi {
	flex: 1;
	line-height: 1.45;
	min-height: 0;
}

/* A card that measures its own height: its padding follows the text size, so scaling keeps the lines. */
.mahanani-kartu-item.is-otomatis .mahanani-kartu-isi {
	padding: .571em .857em;
}

/* Visitors see only what was written. */
div.mahanani-kartu-isi:empty {
	display: none;
}

/* Page elements inside a card's text ([gambar], [isi]): never wider than the card. */
.mahanani-kartu-el-gambar {
	display: block;
	height: auto;
	max-width: 100%;
}

.mahanani-kartu-el-isi {
	white-space: normal;
}

.mahanani-kartu-el-isi > :first-child {
	margin-top: 0;
}

.mahanani-kartu-el-isi > :last-child {
	margin-bottom: 0;
}

.mahanani-kartu-el-isi img,
.mahanani-kartu-el-isi video,
.mahanani-kartu-el-isi iframe,
.mahanani-kartu-el-isi figure,
.mahanani-kartu-el-isi table {
	height: auto;
	max-width: 100%;
}

.mahanani-kartu-el-isi pre {
	overflow-x: auto;
	white-space: pre;
}

.mahanani-kartu-item.ada-foto .mahanani-kartu-el-isi a {
	color: inherit;
}

/* A Kreator's Daftar Buku card: one list per role, with Muat lagi at its foot. */
.mahanani-kreator-buku + .mahanani-kreator-buku {
	margin-top: .8em;
}

.mahanani-kreator-buku-peran {
	font-weight: 700;
	margin: 0 0 .3em;
}

.mahanani-kreator-buku ul {
	margin: 0;
	padding-left: 1.2em;
}

.mahanani-kreator-buku li + li {
	margin-top: .2em;
}

.mahanani-kreator-buku-tahun {
	opacity: .7;
}

.mahanani-kreator-buku-lagi {
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 4px;
	color: inherit;
	cursor: pointer;
	font: inherit;
	margin-top: .5em;
	padding: .2em .8em;
}

.mahanani-kreator-buku-lagi:disabled {
	cursor: default;
	opacity: .6;
}

/* Data Kreator: the name large, the excerpt under it (inc/kreator-papan.php). */
.mahanani-data-kreator-judul {
	font-size: 2.2em;
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 .4em;
	overflow-wrap: anywhere;
}

.mahanani-data-kreator-ringkasan {
	margin: 0;
	overflow-wrap: anywhere;
}

.mahanani-kartu-panel.is-bar > label select {
	font-size: 12px;
	max-width: 220px;
}

.mahanani-kartu-item textarea {
	cursor: inherit;
	user-select: text;
}

.mahanani-kartu-item textarea:focus {
	background: rgba(255, 255, 255, .92);
	color: #1d2327;
	cursor: text;
	outline: 0;
}

.mahanani-kartu-item.ada-foto .mahanani-kartu-teks {
	color: #fff;
}

/* The text gets a dark band over a picture only when there is text. The textarea's placeholder
   is one blank space, so :placeholder-shown tells an empty one apart without showing a prompt. */
.mahanani-kartu-item.ada-foto textarea:not(:placeholder-shown):not(:focus),
.mahanani-kartu-item.ada-foto div.mahanani-kartu-isi {
	background: rgba(0, 0, 0, .55);
}

.mahanani-kartu-sisi {
	position: absolute;
	z-index: 3;
}

.mahanani-kartu-sisi[data-sisi="atas"],
.mahanani-kartu-sisi[data-sisi="bawah"] {
	cursor: ns-resize;
	/* Wide enough for a finger, but always leaving the middle of the card for dragging. */
	height: min(var(--sisi, 8px), 30%);
	left: 0;
	right: 0;
}

.mahanani-kartu-sisi[data-sisi="kiri"],
.mahanani-kartu-sisi[data-sisi="kanan"] {
	bottom: 0;
	cursor: ew-resize;
	top: 0;
	width: min(var(--sisi, 8px), 30%);
}

.mahanani-kartu-sisi[data-sisi="atas"] {
	top: 0;
}

.mahanani-kartu-sisi[data-sisi="bawah"] {
	bottom: 0;
}

.mahanani-kartu-sisi[data-sisi="kiri"] {
	left: 0;
}

.mahanani-kartu-sisi[data-sisi="kanan"] {
	right: 0;
}

/* Without its box only the card's content shows. The border stays see-through so the size holds. */
.mahanani-kartu-item.tanpa-kotak {
	background: transparent !important;
	border-color: transparent;
	box-shadow: none;
}

/* A video covers the card's picture and text. Sides stay above it for resizing. */
.mahanani-kartu-video {
	background: #000;
	inset: 0;
	position: absolute;
	z-index: 2;
}

.mahanani-kartu-video img,
.mahanani-kartu-video iframe {
	border: 0;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* A Bentuk card is its shape alone: no box, edge or shadow. The shape is drawn to the card's size
   and lets presses through to the card, so it drags like any other. */
.mahanani-kartu-item.is-rupa {
	background: transparent !important;
	border-color: transparent;
	box-shadow: none;
}

.mahanani-kartu-rupa {
	height: 100%;
	inset: 0;
	overflow: visible;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

.mahanani-kartu-meja .mahanani-kartu-item.is-rupa:hover,
.mahanani-kartu-meja .mahanani-kartu-item.is-rupa.is-diseret {
	outline: 1px dashed rgba(29, 35, 39, .6);
	outline-offset: -1px;
}

/* A Medsos card before its post is opened: the platform's name and the open button. */
.mahanani-kartu-medsos {
	align-items: center;
	background: #1d2327;
	display: flex;
	justify-content: center;
}

.mahanani-kartu-medsos[data-platform="instagram"] {
	background: linear-gradient(135deg, #833ab4, #e1306c 55%, #f77737);
}

.mahanani-kartu-medsos[data-platform="tiktok"] {
	background: #010101;
}

.mahanani-kartu-medsos[data-platform="spotify"] {
	background: #1db954;
}

.mahanani-kartu-medsos.is-buka {
	background: #fff;
}

.mahanani-kartu-medsos-nama {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	left: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: calc(50% + 34px);
}

.mahanani-kartu-putar,
.mahanani-kartu-tutup-video {
	align-items: center;
	background: rgba(0, 0, 0, .7);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 0;
	position: absolute;
}

.mahanani-kartu-putar {
	font-size: 20px;
	height: 52px;
	left: calc(50% - 26px);
	top: calc(50% - 26px);
	width: 52px;
}

.mahanani-kartu-tutup-video {
	font-size: 14px;
	height: 26px;
	right: 10px;
	top: 10px;
	width: 26px;
	z-index: 4;
}

.mahanani-kartu-panel input[type="text"] {
	border: 1px solid #8c8f94;
	border-radius: 4px;
	box-sizing: border-box;
	display: block;
	font-size: 12px;
	margin-top: 2px;
	padding: 3px 6px;
	width: 100%;
}

.mahanani-kartu-panel input[type="text"].is-gagal {
	border-color: #b32d2e;
}

/* For visitors, a card with a link opens it. */
.mahanani-kartu-item.ada-link {
	cursor: pointer;
}

.mahanani-kartu-item.ada-link:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* The card being set in the panel. */
.mahanani-kartu-item.is-aktif {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* For a page's managers the panel is a bar across the foot of the screen, like a footer. */
.mahanani-kartu-panel.is-bar {
	align-items: center;
	border-radius: 0;
	border-width: 1px 0 0;
	bottom: 0;
	box-shadow: 0 -2px 8px rgba(29, 35, 39, .12);
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 16px;
	left: 0 !important;
	max-height: 50vh;
	overflow-y: auto;
	padding: 10px 16px;
	position: fixed;
	right: 0;
	top: auto !important;
	transform: none !important;
	width: auto !important;
	z-index: 100001;
}

.mahanani-kartu-panel.is-bar[hidden] {
	display: none;
}

.mahanani-kartu-panel.is-bar > label {
	align-items: center;
	display: flex;
	gap: 6px;
}

.mahanani-kartu-panel.is-bar > input[type="range"] {
	width: 180px;
}

.mahanani-kartu-panel.is-bar > label input[type="range"] {
	margin: 0;
	width: 120px;
}

.mahanani-kartu-panel.is-bar > label input[type="text"] {
	margin: 0;
	width: 200px;
}

.mahanani-kartu-panel.is-bar .mahanani-kartu-centang {
	flex-wrap: nowrap;
}

.mahanani-kartu-panel.is-bar .mahanani-kartu-pasang {
	flex: none;
}

/* The name comes first, so it is clear which card the bar is set to. */
.mahanani-kartu-jenis {
	font-weight: 600;
	order: -2;
}

.mahanani-kartu-nama {
	font-weight: 600;
	order: -1;
}

.mahanani-kartu-tutup-panel {
	background: none;
	border: 0;
	color: #1d2327;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	margin-left: auto;
	order: 99;
	padding: 0 4px;
}

/* Only the edge goes; the card keeps its fill and shadow. */
.mahanani-kartu-item.tanpa-garis {
	border-color: transparent;
}

.mahanani-kartu-panel [hidden] {
	display: none !important;
}

.mahanani-kartu-buka-link {
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

.mahanani-kartu-buka-link,
.mahanani-kartu-gambar,
.mahanani-kartu-hapus-gambar,
.mahanani-kartu-reset-warna {
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: #1d2327;
	cursor: pointer;
	font-size: 12px;
	padding: 4px 8px;
}

.mahanani-kartu-reset-warna:disabled {
	cursor: default;
	opacity: .5;
}

/* Guide lines: over every card (a card's z goes up to 1000000), cut at the board's edge,
   letting presses through to the cards. Only the handle takes them. */
.mahanani-kartu-garis-lapis {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 2000000;
}

.mahanani-kartu-garis {
	height: 0;
	position: absolute;
	transform-origin: 0 0;
	width: 0;
}

/* Long enough to cross the whole board from any point on it. */
.mahanani-kartu-garis::before {
	border-top: var(--piksel, 1px) dashed #d63638;
	content: '';
	left: -4000px;
	position: absolute;
	top: calc(var(--piksel, 1px) / -2);
	width: 8000px;
}

.mahanani-kartu-garis-pegang {
	background: #d63638;
	border: var(--piksel, 1px) solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	cursor: move;
	height: calc(var(--piksel, 1px) * 14);
	left: calc(var(--piksel, 1px) * -7);
	pointer-events: auto;
	position: absolute;
	top: calc(var(--piksel, 1px) * -7);
	touch-action: none;
	width: calc(var(--piksel, 1px) * 14);
}

/* Board panel: one row per line. */
.mahanani-kartu-garis-grup,
.mahanani-kartu-garis-daftar {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
}

.mahanani-kartu-garis-daftar:empty {
	display: none;
}

.mahanani-kartu-garis-baris {
	align-items: center;
	display: flex;
	font-size: 12px;
	gap: 6px;
}

.mahanani-kartu-garis-baris input[type="range"] {
	margin: 0;
	width: 120px;
}

.mahanani-kartu-garis-baris input[type="number"] {
	margin: 0;
	width: 56px;
}

.mahanani-kartu-pasang input[type="color"] {
	flex: 1;
	height: 22px;
	min-width: 0;
	padding: 0;
}

/* Shows under a double-clicked card. Middle of each slider is the card's own place. */
.mahanani-kartu-panel {
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(29, 35, 39, .12);
	box-sizing: border-box;
	color: #1d2327;
	display: flex;
	flex-direction: column;
	font-size: 12px;
	gap: 8px;
	padding: 12px;
	position: absolute;
	width: 280px;
	z-index: 2000000;
}

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

.mahanani-kartu-centang {
	display: flex;
	gap: 12px;
	justify-content: center;
}

.mahanani-kartu-centang {
	flex-wrap: wrap;
}

.mahanani-kartu-centang input {
	cursor: pointer;
	margin: 0;
}

.mahanani-kartu-pasang {
	align-items: center;
	display: flex;
	flex: 1;
	gap: 4px;
	min-width: 64px;
}

.mahanani-kartu-pasang input[type="number"] {
	border: 1px solid #8c8f94;
	border-radius: 4px;
	box-sizing: border-box;
	cursor: text;
	flex: 1;
	font-size: 12px;
	min-width: 0;
	padding: 2px 4px;
}

/* The blue line runs from the centre to the dot. 14px is the dot's width. */
.mahanani-kartu-panel input[type="range"] {
	--posisi: calc(50% + (100% - 14px) * var(--nilai, 0) / 200);
	--garis: linear-gradient(to right, #dcdcde min(50%, var(--posisi)), #2271b1 min(50%, var(--posisi)), #2271b1 max(50%, var(--posisi)), #dcdcde max(50%, var(--posisi)));
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	display: block;
	height: 18px;
	margin: 2px 0 0;
	width: 100%;
}

.mahanani-kartu-panel input[type="range"]::-webkit-slider-runnable-track {
	background: var(--garis);
	border-radius: 2px;
	height: 4px;
}

.mahanani-kartu-panel input[type="range"]::-moz-range-track {
	background: var(--garis);
	border-radius: 2px;
	height: 4px;
}

.mahanani-kartu-panel input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	background: #2271b1;
	border: 0;
	border-radius: 50%;
	height: 14px;
	margin-top: -5px;
	width: 14px;
}

.mahanani-kartu-panel input[type="range"]::-moz-range-thumb {
	background: #2271b1;
	border: 0;
	border-radius: 50%;
	height: 14px;
	width: 14px;
}

/* On every screen, phones included, cards sit on the board and can be dragged. */
.mahanani-kartu-item {
	cursor: grab;
	touch-action: none;
}

.mahanani-kartu-item.is-diseret {
	box-shadow: 0 12px 28px rgba(29, 35, 39, .28);
	cursor: grabbing;
}

/* Locked by the header's padlock: a card is not grabbed, its sides and tick box are gone, and a card
   with a link shows the pointing hand. The board itself still moves. */
.mahanani-kartu-meja.is-terkunci .mahanani-kartu-item {
	cursor: inherit;
}

.mahanani-kartu-meja.is-terkunci .mahanani-kartu-item.ada-link {
	cursor: pointer;
}

.mahanani-kartu-meja.is-terkunci .mahanani-kartu-sisi,
.mahanani-kartu-meja.is-terkunci .mahanani-kartu-pilih {
	display: none;
}

.mahanani-kartu-meja.is-terkunci .mahanani-kartu-item textarea {
	cursor: inherit;
}

/* Locked, nothing is arranged: a card without its box or edge, or a shape, shows no guide line when
   pointed at, for anyone. A card with a link keeps its keyboard focus ring. */
.mahanani-kartu-meja.is-terkunci .mahanani-kartu-item.tanpa-kotak:hover,
.mahanani-kartu-meja.is-terkunci .mahanani-kartu-item.tanpa-garis:hover,
.mahanani-kartu-meja.is-terkunci .mahanani-kartu-item.is-rupa:hover {
	outline: 0;
}

/* A card without its box stays without it: no shadow while dragged, no fill while typed in,
   no outline while its panel is open. */
.mahanani-kartu-item.tanpa-kotak.is-diseret {
	box-shadow: none;
}

.mahanani-kartu-item.tanpa-kotak textarea:focus {
	background: transparent;
	color: inherit;
}

.mahanani-kartu-item.tanpa-kotak.is-aktif {
	outline: 0;
}

/* A guide for everyone: a card without box or edge still shows its shape when pointed at or held. */
.mahanani-kartu-meja .mahanani-kartu-item.tanpa-kotak:hover,
.mahanani-kartu-meja .mahanani-kartu-item.tanpa-garis:hover,
.mahanani-kartu-meja .mahanani-kartu-item.tanpa-kotak.is-diseret,
.mahanani-kartu-meja .mahanani-kartu-item.tanpa-garis.is-diseret {
	outline: 1px dashed rgba(29, 35, 39, .6);
	outline-offset: -1px;
}

/* Managers' tick box, top left, above the sides. Shown on the card pointed at, on ticked cards,
   and on every card while any is ticked. */
.mahanani-kartu-pilih {
	cursor: pointer;
	height: 16px;
	left: 6px;
	margin: 0;
	opacity: 0;
	position: absolute;
	top: 6px;
	width: 16px;
	z-index: 4;
}

.mahanani-kartu-item:hover .mahanani-kartu-pilih,
.mahanani-kartu-meja.ada-pilihan .mahanani-kartu-pilih,
.mahanani-kartu-pilih:focus-visible {
	opacity: 1;
}

/* Touch screens cannot point at a card, so the box always shows there. */
@media (hover: none) {
	.mahanani-kartu-pilih {
		opacity: 1;
	}
}

/* A turned-away card shows its back only. */
.mahanani-kartu-item.is-terbalik .mahanani-kartu-pilih {
	display: none;
}

/* Ticked cards. A card without its box keeps no outline; its tick box shows it is ticked. */
.mahanani-kartu-item.is-pilih {
	outline: 2px dashed #2271b1;
	outline-offset: 2px;
}

.mahanani-kartu-item.is-pilih.is-aktif {
	outline-style: solid;
}

.mahanani-kartu-item.tanpa-kotak.is-pilih {
	outline: 0;
}

/* A grouped card's text is not typed in, so it shows the dragging hand. */
.mahanani-kartu-item.is-kelompok textarea {
	cursor: inherit;
}

/* The tools for several ticked cards: one wrapping row in the panel. */
.mahanani-kartu-banyak {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	width: 100%;
}

.mahanani-kartu-banyak[hidden] {
	display: none;
}

.mahanani-kartu-jumlah {
	font-weight: 600;
	margin-right: 8px;
}

.mahanani-kartu-banyak button {
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: #1d2327;
	cursor: pointer;
	font-size: 12px;
	padding: 4px 8px;
}

/* The back of a card turned away from the viewer: the site logo, mirrored once so it reads correctly. */
.mahanani-kartu-belakang {
	align-items: center;
	background: #fff;
	display: none;
	inset: 0;
	justify-content: center;
	pointer-events: none;
	position: absolute;
	z-index: 5;
}

.mahanani-kartu-item.is-terbalik .mahanani-kartu-belakang {
	display: flex;
}

.mahanani-kartu-belakang img {
	max-height: 60%;
	max-width: 50%;
	transform: scaleX(-1);
}

/* Turning controls are hidden for cards that never turn. */
.mahanani-kartu-panel [hidden] {
	display: none !important;
}