/*****************************************************************
ForestDragon: narrow-screen (phone) layout. Loaded by header.php only when
the visitor has not turned off "auto-fit narrow screens" (cookie pun_narrow=0).
*****************************************************************/

/* Narrow screens
----------------------------------------------------------------*/

@media (max-width: 900px) {
	.pun {
		padding: 12px;
	}

	.pun .punwrap {
		padding: 12px;
		border-radius: 6px;
	}
}

@media (max-width: 700px) {
	#brdmenu a:link, #brdmenu a:visited {
		min-width: 0;
		padding: 8px 12px;
	}

	#brdwelcome .conl, #brdwelcome .conr, #brdstats .conl, #brdstats .conr,
	.pun #brdfooter .conl, .pun #brdfooter .conr {
		float: none;
		text-align: left;
	}

	.pun .blocktable .tc2, .pun .blocktable .tc3 {
		width: 14%;
	}

	.pun .blocktable .tcr {
		width: 28%;
	}

	/* Announcement: announcement text first, shoutbox below it (instead of side by side) */
	#announce #announce-block {
		display: flex;
		flex-direction: column;
	}

	#announce #announce-block .usercontent {
		order: 1;
	}

	#announce #announce-block #tips {
		order: 2;
	}

	#announce #shoutbox {
		border-top: 1px dotted #bbc6b2;
		float: none;
		margin-top: 8px;
		order: 3;
		padding-top: 8px;
		width: auto;
	}

	#announce #shoutbox #ajaxChatInputField {
		width: 55%;
	}

	/* Index summary: stack the three columns, each under its own heading */
	#punindex #summary table {
		display: grid;
		grid-template-columns: 1fr;
	}

	#punindex #summary thead, #punindex #summary tbody, #punindex #summary tfoot, #punindex #summary tr {
		display: contents;
	}

	#punindex #summary th, #punindex #summary td {
		border: 0;
		display: block;
		padding: 7px 10px;
		width: auto;
	}

	#punindex #summary thead th {
		border-bottom-style: solid;
		border-bottom-width: 1px;
	}

	#punindex #summary thead th:nth-child(1) { order: 1; }
	#punindex #summary tbody td:nth-child(1) { order: 2; }
	#punindex #summary thead th:nth-child(2) { order: 3; }
	#punindex #summary tbody td:nth-child(2) { order: 4; }
	#punindex #summary thead th:nth-child(3) { order: 5; }
	#punindex #summary tbody td:nth-child(3) { order: 6; }
	#punindex #summary tfoot td:nth-child(1) { order: 7; }

	#punindex #summary tfoot td:nth-child(n+2) {
		display: none;
	}

	#punindex #summary thead th:nth-child(n+2) {
		border-top-style: solid;
		border-top-width: 1px;
	}

	#punindex #summary tbody li {
		padding: 2px 0;
	}

	#punindex #summary tbody li .byuser {
		white-space: nowrap;
	}

	/* Topic list as a single-column feed (v2ex style) */
	#punviewforum #vf table, #punviewforum #vf tbody, #punviewforum #vf tr, #punviewforum #vf td {
		display: block;
		width: auto;
	}

	#punviewforum #vf thead {
		display: none;
	}

	#punviewforum #vf tr {
		border-bottom: 1px solid #dce6d8;
		padding: 9px 12px;
		position: relative;
	}

	#punviewforum #vf tr:last-child {
		border-bottom: 0;
	}

	#punviewforum #vf td {
		border: 0;
		line-height: 1.5;
		padding: 0;
		text-align: left;
	}

	#punviewforum #vf td.tcl {
		padding-right: 52px;
	}

	#punviewforum #vf td.tcl .icon {
		margin-top: 4px;
	}

	#punviewforum #vf td.tcl .tclcon {
		margin-left: 0;
		padding: 0 0 0 10px;
	}

	#punviewforum #vf td.tcl .tclcon > div {
		overflow: visible;
	}

	#punviewforum #vf td.tcl a.convert {
		font-size: 1.077em;
	}

	#punviewforum #vf td.tcl span.byuser {
		color: #83866a;
		font-size: 0.923em;
	}

	#punviewforum #vf td.tcl span.byuser::before {
		content: "";
		display: block;
		height: 2px;
	}

	#punviewforum #vf td.tc2 {
		background: #eaecda;
		border-radius: 10px;
		color: #83866a;
		font-size: 0.846em;
		font-weight: bold;
		line-height: 1.6;
		min-width: 1.4em;
		padding: 0 7px;
		position: absolute;
		right: 12px;
		text-align: center;
		top: 10px;
	}

	#punviewforum #vf td.tc3 {
		display: none;
	}

	#punviewforum #vf td.tcr {
		color: #83866a;
		font-size: 0.846em;
		padding-left: 26px;
		white-space: normal;
	}

	#punviewforum #vf td.tcr::before {
		content: "最后回复 ";
	}

	/* Posts as a flat reply feed (v2ex style). The nested box/inbox/
	   postbody/postfoot wrappers are flattened so the cells can be
	   re-ordered: user line, meta line, message, foot links. */
	.pun .blockpost {
		background: #fcfcf4;
		border: 0;
		border-bottom: 1px solid #dce6d8;
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: 10px 12px 8px 12px;
		position: relative;
	}

	.pun .blockpost .postleft dl {
		padding-right: 40px;
	}

	.pun .blockpost .box, .pun .blockpost .inbox, .pun .blockpost .postbody, .pun .blockpost .postfoot {
		display: contents;
	}

	/* 1. user line: avatar, name, title, contacts */
	.pun .blockpost .postleft {
		background: transparent;
		border: 0;
		flex: 1 1 100%;
		float: none;
		margin: 0;
		min-width: 0;
		order: 1;
		padding: 0;
		width: auto;
	}

	.pun .blockpost .postleft dl {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: 0 10px;
		padding-left: 46px;
		position: relative;
		min-height: 36px;
	}

	#punviewtopic .blockpost dt, #punmoderate .blockpost dt {
		height: auto;
		padding: 0;
		position: static;
		width: auto;
	}

	.pun .blockpost dt strong {
		font-size: 1.077em;
	}

	.pun .blockpost .postleft .usertitle {
		color: #83866a;
		font-size: 0.923em;
		margin: 0;
		padding: 0;
	}

	.pun .blockpost .postleft .postavatar {
		left: 0;
		margin: 0;
		position: absolute;
		top: 0;
	}

	.pun .blockpost .postleft .postavatar img {
		border-radius: 4px;
		display: block;
		height: 36px;
		width: 36px;
	}

	.pun .blockpost .usercontacts {
		font-size: 0.923em;
		margin: 0;
		padding: 0;
	}

	/* Keep only name, avatar, title and contact links */
	.pun .blockpost .postleft dd:not(.usertitle):not(.postavatar):not(.usercontacts) {
		display: none;
	}

	/* 2. meta line: time, per-post links, floor number */
	.pun .blockpost h2 {
		background: none;
		border: 0;
		color: #83866a;
		flex: 1 1 100%;
		font-size: 0.846em;
		height: auto;
		line-height: 1.6;
		margin: 0;
		order: 2;
		padding: 2px 0 0 46px;
		white-space: normal;
	}

	/* floor number sits at the right end of the user line */
	.pun .blockpost h2 .conr {
		background: #eaecda;
		border-radius: 3px;
		color: #83866a;
		float: none;
		padding: 0 5px;
		position: absolute;
		right: 12px;
		top: 14px;
		width: auto;
	}

	/* 3. message */
	.pun .blockpost .postright {
		background: transparent;
		border: 0;
		flex: 1 1 100%;
		float: none;
		margin: 0;
		order: 3;
		padding: 8px 0 0 0;
		width: auto;
	}

	.pun .blockpost .postright h3 {
		display: none;
	}

	/* 4. foot links; online status is dropped */
	.pun .blockpost .postfootleft {
		display: none;
	}

	.pun .blockpost .postfootright {
		background: transparent;
		border: 0;
		flex: 1 1 100%;
		float: none;
		font-size: 0.923em;
		margin: 0;
		order: 4;
		padding: 6px 0 0 0;
		text-align: right;
		width: auto;
	}

	.pun .blockpost .postfootright li {
		color: transparent;
	}
}