/* A Bahasan's own cards (inc/bahasan-papan.php). Sizes follow the card's text size (em). */

/* Links take the site's link colour, never underlined (style.css). */
.mahanani-bahasan-induk a,
.mahanani-bahasan-sub a,
.mahanani-bahasan-daftar a,
.mahanani-bahasan-induk a:visited,
.mahanani-bahasan-sub a:visited,
.mahanani-bahasan-daftar a:visited {
	color: var(--warna-tautan, #4169e1);
}

.mahanani-bahasan-induk a:hover,
.mahanani-bahasan-sub a:hover,
.mahanani-bahasan-daftar a:hover {
	color: var(--warna-tautan-hover, #191970);
}

/* The icons at the main card's top right: add a Syarah, and make a sub-Bahasan (its owner and administrators). */
.mahanani-bahasan-utama {
	position: relative;
}

/* Where the Bahasan sits, above its title: its Buku or Kreator, then every parent Bahasan.
   Bold, in the card's own text colour; each is still a link. */
.mahanani-bahasan-utama > .mahanani-bahasan-induk {
	margin: 0 0 0.4em;
	font-size: 1.2em;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.mahanani-bahasan-utama > .mahanani-bahasan-induk a,
.mahanani-bahasan-utama > .mahanani-bahasan-induk a:visited,
.mahanani-bahasan-utama > .mahanani-bahasan-induk a:hover {
	color: inherit;
}

/* The title and the icons share one line; a long title wraps beside them, the icons stay by its first line. */
.mahanani-bahasan-utama-kepala {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	margin: 0 0 0.5em;
}

.mahanani-bahasan-utama-kepala .mahanani-bahasan-utama-judul {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* The title's first line is 1.8em × 1.2 tall; the 2em icons sit in its middle. */
.mahanani-bahasan-ikon {
	flex: none;
	display: flex;
	gap: 0.3em;
	margin-top: 0.08em;
}

.mahanani-bahasan-kartu-baru .mahanani-bahasan-buat {
	margin-bottom: 0.8em;
}

.mahanani-bahasan-ikon-tombol,
.mahanani-bahasan-ikon-tombol:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 6px;
	cursor: pointer;
}

.mahanani-bahasan-ikon-tombol svg {
	width: 1.2em;
	height: 1.2em;
}

.mahanani-bahasan-ikon-tombol:hover,
.mahanani-bahasan-ikon-tombol:focus {
	border-color: currentColor;
}

.mahanani-bahasan-sub,
.mahanani-bahasan-daftar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mahanani-bahasan-sub li {
	margin: 0 0 0.4em;
}

.mahanani-bahasan-jumlah,
.mahanani-bahasan-oleh,
.mahanani-bahasan-hitung {
	opacity: 0.65;
	font-size: 0.85em;
}

.mahanani-bahasan-daftar li {
	padding: 0.6em 0;
	border-top: 1px solid currentColor;
	border-top-color: rgba(127, 127, 127, 0.3);
	overflow-wrap: anywhere;
}

.mahanani-bahasan-daftar li > a {
	display: block;
	font-weight: 700;
}

.mahanani-bahasan-daftar li p {
	margin: 0.3em 0 0;
}

.mahanani-bahasan-tulis {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	margin: 0 0 0.6em;
}

.mahanani-bahasan-tulis input,
.mahanani-bahasan-tulis textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: 0.4em;
}

.mahanani-bahasan-tulis textarea {
	resize: vertical;
}

.mahanani-bahasan-tulis button,
.mahanani-bahasan-lagi {
	align-self: flex-start;
	font: inherit;
	cursor: pointer;
}

.mahanani-bahasan-lagi {
	margin-top: 0.6em;
}

.mahanani-bahasan-buat {
	margin: 0 0 0.6em;
}

.mahanani-bahasan-buat summary {
	cursor: pointer;
	font-weight: 700;
	margin-bottom: 0.4em;
}

.mahanani-bahasan-centang {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: 0.9em;
}

.mahanani-bahasan-centang input {
	width: auto;
}

.mahanani-bahasan-keluar {
	display: block;
	margin-top: 0.3em;
	font: inherit;
	font-size: 0.8em;
	cursor: pointer;
}

.mahanani-bahasan-hasil {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mahanani-bahasan-daftar .mahanani-bahasan-hasil li,
.mahanani-bahasan-kartu-baru .mahanani-bahasan-hasil li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
	padding: 0.3em 0;
}

.mahanani-bahasan-hasil button {
	flex: none;
	font: inherit;
	cursor: pointer;
}

/* A Bahasan's card on its parent's board: a recap of what is discussed there. */
.mahanani-bahasan-rekap {
	overflow-wrap: anywhere;
}

.mahanani-bahasan-rekap-judul {
	display: block;
	font-weight: 700;
	font-size: 1.15em;
	color: inherit;
	margin-bottom: 0.3em;
}

.mahanani-bahasan-rekap p {
	margin: 0 0 0.3em;
}

.mahanani-bahasan-terbaru {
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.8;
}

.mahanani-bahasan-kait-judul {
	margin: 0 0 0.3em;
	font-weight: 700;
	font-size: 0.85em;
}

/* The window for a new Bahasan on a Kreator's page. */
.mahanani-bahasan-dialog {
	width: min(28rem, calc(100vw - 2rem));
	box-sizing: border-box;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 8px;
	padding: 1rem;
	font-size: 15px;
	color: #1d2327;
	background: #fff;
}

.mahanani-bahasan-dialog::backdrop {
	background: rgba(0, 0, 0, 0.35);
}

.mahanani-bahasan-dialog label {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
}

.mahanani-bahasan-dialog .mahanani-bahasan-centang {
	flex-direction: row;
}

.mahanani-bahasan-dialog select {
	font: inherit;
	padding: 0.3em;
}

.mahanani-bahasan-tombol {
	display: flex;
	gap: 0.5em;
}

.mahanani-bahasan-daftar-bahasan li {
	padding: 0.4em 0;
	overflow-wrap: anywhere;
}

/* The main card: the Bahasan's title and content, then adding a Syarah. Long content scrolls in the card. */
.mahanani-bahasan-utama {
	overflow-wrap: anywhere;
}

.mahanani-bahasan-utama-judul {
	margin: 0 0 0.5em;
	font-size: 1.8em;
	line-height: 1.2;
}

.mahanani-bahasan-utama-isi {
	margin: 0 0 0.8em;
}

.mahanani-bahasan-utama-isi img {
	max-width: 100%;
	height: auto;
}

.mahanani-bahasan-utama-aksi {
	padding-top: 0.6em;
	border-top: 1px solid rgba(127, 127, 127, 0.3);
}

/* What a Syarah comments on, at the top of its main card: "Bahasan B", "Syarah C". */
.mahanani-syarah-sasaran {
	margin: 0 0 0.6em;
	padding-left: 1.2em;
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.mahanani-syarah-sasaran a {
	font-weight: 700;
}

/* The Syarah its owner picked, between the content and the sub-Bahasan: each one's content alone,
   set apart by a thin line. Nothing shows when none is picked. */
.mahanani-bahasan-pilihan:empty {
	display: none;
}

.mahanani-bahasan-pilihan {
	margin: 0 0 0.8em;
}

/* No line between picks: each one's content follows the last, set apart only by space. */
.mahanani-bahasan-pilihan-item {
	padding: 0.4em 0;
}

.mahanani-bahasan-pilihan-isi {
	overflow-wrap: anywhere;
}

.mahanani-bahasan-pilihan-isi > :first-child {
	margin-top: 0;
}

.mahanani-bahasan-pilihan-isi > :last-child {
	margin-bottom: 0;
}

.mahanani-bahasan-pilihan-isi img {
	max-width: 100%;
	height: auto;
}

/* Its owner's tools on each pick: which Syarah it is, then up, down and Lepas. */
.mahanani-bahasan-pilihan-alat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em;
	margin-bottom: 0.4em;
	font-size: 0.8em;
	opacity: 0.75;
}

.mahanani-bahasan-pilihan-nama {
	flex: 1 1 8em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mahanani-bahasan-pilihan-alat button,
.mahanani-bahasan-pilih {
	font: inherit;
	cursor: pointer;
}

.mahanani-bahasan-pilihan-alat button:disabled {
	cursor: default;
	opacity: 0.4;
}

.mahanani-bahasan-pilih {
	display: block;
	margin-top: 0.3em;
	font-size: 0.8em;
}

.mahanani-bahasan-pilih[aria-pressed="true"] {
	font-weight: 700;
}

.mahanani-bahasan-tabel td .mahanani-bahasan-pilih {
	display: inline-block;
	margin: 0;
	font-size: 0.75em;
	white-space: nowrap;
}

.mahanani-bahasan-pilih.is-gagal {
	color: #b32d2e;
}

.mahanani-bahasan-kartu-baru .mahanani-bahasan-buat summary {
	font-weight: 400;
	font-size: 0.9em;
}

/* A Bahasan card's title shares its line with the icons, like the main card's. */
.mahanani-bahasan-rekap .mahanani-bahasan-utama-kepala .mahanani-bahasan-rekap-judul {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/* How many Syarah, at the title line's right, just left of the icons. */
.mahanani-bahasan-rekap-jumlah {
	flex: none;
	margin-top: 0.35em;
	font-size: 0.85em;
	opacity: 0.65;
	white-space: nowrap;
}

/* The sub-Bahasan at the foot of the main card and of a Bahasan's card: one level, a bulleted
   list in the card's own text colour, bold. Each is still a link. */
.mahanani-bahasan-sub-kaki {
	margin-top: 0.6em;
	padding-top: 0.5em;
	border-top: 1px solid rgba(127, 127, 127, 0.3);
}

.mahanani-bahasan-sub-kaki .mahanani-bahasan-sub {
	list-style: disc;
	padding-left: 1.2em;
}

.mahanani-bahasan-sub-kaki .mahanani-bahasan-sub li {
	margin: 0 0 0.25em;
	font-weight: 700;
}

.mahanani-bahasan-sub-kaki a,
.mahanani-bahasan-sub-kaki a:visited,
.mahanani-bahasan-sub-kaki a:hover {
	color: inherit;
}

.mahanani-bahasan-sub-kaki .mahanani-bahasan-sub-sisa {
	list-style: none;
	font-size: 0.85em;
	font-weight: 400;
}

/* The Tabel Syarah card: its title (how many Syarah), a search field, then a table that scrolls
   sideways on a narrow card. */
.mahanani-bahasan-tabel {
	overflow-wrap: anywhere;
}

.mahanani-bahasan-tabel-cari {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	margin: 0 0 0.5em;
}

.mahanani-bahasan-tabel-cari input {
	flex: 1 1 10em;
	min-width: 0;
	box-sizing: border-box;
	font: inherit;
	padding: 0.35em 0.5em;
}

.mahanani-bahasan-tabel .mahanani-bahasan-tabel-kepala {
	margin: 0 0 0.5em;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.2;
	opacity: 1;
}

.mahanani-bahasan-tabel-gulir {
	overflow-x: auto;
}

.mahanani-bahasan-tabel table {
	width: 100%;
	border-collapse: collapse;
}

.mahanani-bahasan-tabel td {
	padding: 0.35em 0.4em;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

/* One row: the writer's photo, the title taking the room, then its owner's buttons. */
.mahanani-bahasan-tabel-ikon {
	width: 1px;
	padding-left: 0 !important;
}

.mahanani-bahasan-tabel-judul {
	width: 100%;
	min-width: 8em;
	font-weight: 700;
}

.mahanani-bahasan-tabel-aksi {
	width: 1px;
	white-space: nowrap;
}

.mahanani-penulis-ikon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	vertical-align: middle;
	background: rgba(127, 127, 127, 0.2);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.mahanani-penulis-ikon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mahanani-bahasan-tabel a,
.mahanani-bahasan-tabel a:visited {
	color: var(--warna-tautan, #4169e1);
}

.mahanani-bahasan-tabel a:hover {
	color: var(--warna-tautan-hover, #191970);
}

.mahanani-bahasan-tabel-kosong td {
	opacity: 0.65;
	font-style: italic;
}

/* A Syarah's card on a Bahasan: title, writer and date, the start of its text. */
.mahanani-bahasan-syarah-kartu {
	overflow-wrap: anywhere;
}

.mahanani-bahasan-syarah-kartu p {
	margin: 0 0 0.3em;
}

.mahanani-bahasan-syarah-kartu .mahanani-bahasan-oleh {
	display: block;
}