/* ==========================================================================
   Parchment tables — the theme's own TableContainer, written as CSS.

   Every box on tibia.com (and on this site's account, login and character
   pages) is the same object: a #5f4d41 caption bar held between two riveted
   grey strips with corner caps, a 2px blue-grey frame, a beige gutter, a
   thin brown line, and rows that alternate the two parchments. basic.css
   builds that out of nine positioned spans and three nested tables; this
   sheet draws the identical thing from four elements so the Compendium and
   the World Map can use it for navigation without inheriting the table
   layout (font-size:1px, height:100%, margin-right hacks) that comes with
   the original markup.

   Markup:
     <div class="pt-box">
       <div class="pt-cap"><span class="pt-cap-frame"></span><span class="pt-cap-text">Title</span></div>
       <div class="pt-body"><div class="pt-inner"> rows … </div></div>
     </div>

   Every colour and gif is the theme's: table-headline-border.gif (the
   riveted strip), box-frame-edge.gif (the caps), box-frame-vertical.gif
   (the sides), #55636c (Table3's frame), #f1e0c5 (its gutter), #5f4d41 (the
   content line) and #f1e0c6 / #d4c0a1 (Odd / Even). Relative urls resolve
   against templates/backpackot/.
   ========================================================================== */

.pt-box { position: relative; margin: 2px 0 0; }
.pt-box + .pt-box { margin-top: 14px; }

/* The caption bar. The strips sit 1px above and 2px below the bar exactly as
   .CaptionBorderTop / .CaptionBorderBottom do, so the bottom strip overlaps
   the body's frame the way the original overlaps its table. */
.pt-cap {
	position: relative; z-index: 1;
	display: flex; align-items: center; gap: 8px;
	min-height: 23px; margin: 0; padding: 3px 10px 4px;
	background: #5f4d41;
	color: #fff; font: bold 10pt/16px Verdana, Arial, sans-serif;
}
.pt-cap::before, .pt-cap::after {
	content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 4px;
	background: url(images/content/table-headline-border.gif) repeat-x;
}
.pt-cap::before { top: -1px; }
.pt-cap::after { bottom: -2px; }
/* The four caps and the two sides, as backgrounds on one overlay. */
.pt-cap-frame {
	position: absolute; top: -2px; right: -2px; bottom: -3px; left: -2px; z-index: 3;
	pointer-events: none;
	background:
		url(images/content/box-frame-edge.gif) no-repeat left top,
		url(images/content/box-frame-edge.gif) no-repeat right top,
		url(images/content/box-frame-edge.gif) no-repeat left bottom,
		url(images/content/box-frame-edge.gif) no-repeat right bottom,
		url(images/content/box-frame-vertical.gif) repeat-y 1px 0,
		url(images/content/box-frame-vertical.gif) repeat-y right 1px top 0;
}
.pt-cap-text {
	flex: 1 1 auto; min-width: 0; margin: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: #fff; font: inherit;
}
.pt-cap small, .pt-cap-note { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #e6d9c8; font-size: 8pt; font-weight: normal; white-space: nowrap; }
/* A small action in the bar (Tibia's "show all" / "hide"): white, underlined. */
.pt-cap-action {
	position: relative; z-index: 4; flex: 0 0 auto;
	margin: 0; padding: 0 2px; border: 0; background: none;
	color: #fff; font: bold 8pt/16px Verdana, Arial, sans-serif; text-decoration: underline; white-space: nowrap; cursor: pointer;
}
.pt-cap-action:hover { color: #ffd18c; }
/* On phones the whole bar is a toggle; see the media block at the foot. */
.pt-cap-toggle { display: none; }
.pt-cap-icon { display: none; }

/* The body: Table3's frame and gutter, then the brown line around the rows. */
.pt-body {
	position: relative;
	border: 2px solid #55636c;
	background: #f1e0c5;
	padding: 5px 4px 4px 3px;
}
.pt-inner {
	border: 1px solid #5f4d41;
	background: #f1e0c6;
	color: #5A2800;
}

/* Rows: the two parchments, Odd on Even, no hairlines — Tibia separates rows
   by colour alone. A list alternates its direct children. background-COLOR,
   not the shorthand: a row may carry the gold bullet as its background image. */
.pt-row { padding: 4px 8px; background-color: #f1e0c6; color: #5A2800; font-size: 10pt; }
.pt-row.is-even { background-color: #d4c0a1; }
.pt-list { list-style: none; margin: 0; padding: 0; }
.pt-list > * { background-color: #f1e0c6; }
.pt-list > :nth-child(even) { background-color: #d4c0a1; }

/* The expander: the theme's own 12px stone button, green plus / red minus. */
.pt-toggle {
	flex: 0 0 12px; width: 12px; height: 12px; margin: 0; padding: 0;
	border: 0; background: url(images/global/general/plus.gif) no-repeat; cursor: pointer;
}
.pt-toggle[aria-expanded="true"] { background-image: url(images/global/general/minus.gif); }
.pt-toggle:focus-visible { outline: 2px solid #d9b34e; outline-offset: 1px; }

/* ── Phones ──────────────────────────────────────────────────────────────
   A box can fold to its caption: the bar becomes the toggle (a transparent
   button over the whole bar, under any explicit action), and the theme's
   plus / minus shows at the right edge. Desktop never folds. */
@media (max-width: 900px) {
	.pt-box.is-foldable .pt-cap { padding-right: 30px; cursor: pointer; }
	.pt-box.is-foldable .pt-cap-toggle {
		display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3;
		margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
	}
	.pt-box.is-foldable .pt-cap-toggle:focus-visible { outline: 2px solid #d9b34e; outline-offset: -2px; }
	.pt-box.is-foldable .pt-cap-icon {
		display: block; position: absolute; top: 50%; right: 10px; z-index: 2;
		width: 12px; height: 12px; margin-top: -6px;
		background: url(images/global/general/minus.gif) no-repeat;
	}
	.pt-box.is-foldable.is-collapsed .pt-cap-icon { background-image: url(images/global/general/plus.gif); }
	.pt-box.is-foldable.is-collapsed .pt-body { display: none; }
	.pt-box + .pt-box { margin-top: 12px; }
}