/* main tags */
html {
	height: 100%;
}
body {
	/* color: #d6e5ff; */
	color: #aaa;
	background-image: url(/common/shared_content/images/bg_flair_dark.jpg);
	height: 100%;
}
a {
	color: #0a7af2;
	text-decoration: none;
}
a:hover {
	color: #0864c7;
	text-decoration: none;
}
hr {
	border: 3px solid #bfbfbf;
	margin-top: 3px;
	margin-bottom: 3px;
}
input, textarea, select {
	border: 1px solid #fff;
	background-color: #d6e5ff;
}
input.ng-touched.ng-invalid, textarea.ng-touched.ng-invalid, select.ng-touched.ng-invalid {
	border: 1px dashed #f20f0f;
	background-color: #ffd6d6;
}
input.ng-invalid-required, textarea.ng-invalid-required, select.ng-invalid-required {
	border: 1px dashed #f20f0f;
}
.input-util-container {
	background-image: url(/images/dark-texture.png);
	border-top: 2px dashed black;
	border-right: 2px dashed black;
	border-bottom: 2px dashed black;
}
label {
	font-weight: bold;
}
/* main tags */

/* scrollbars: the header's texture for the track, a dark gray thumb, the link blue while
   dragged.  The ::-webkit- rules are Chromium (psyBrowser included) and Safari; the
   standard pair is for Firefox only, because Chromium drops the ::-webkit- rules on any
   element that has scrollbar-color or scrollbar-width set.  A rule that hides a scrollbar
   (.content-cv .content-scroll) is more specific than these and still wins. */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
	background-image: url(/images/dark-texture.png);
}
::-webkit-scrollbar-thumb {
	background-color: #3d3d3d;
	border: 3px solid transparent;
	border-radius: 6px;
	background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
	background-color: #555;
}
::-webkit-scrollbar-thumb:active {
	background-color: #0a7af2;
}
@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-width: thin;
		scrollbar-color: #3d3d3d #191919;
	}
}
/* /scrollbars */

/* header */
.environment {
	font-weight: bold;
	size: 20px;
}
.environment-development {
	color: red;
	border: 2px dashed red;
	border-radius: 4px;
	padding: 4px;
}
.header {
	height: 50px;
	padding-top: 10px;
	padding-bottom: 5px;
	background-image: url(/images/dark-texture.png);
	border-bottom: 2px dashed black;
}
.header-dropdown-menu {
	font-size: 25px;
	background-image: url(/images/dark-texture.png);
	display: block;
	position: absolute;
	z-index: 10;
	max-height: calc(100vh - 100px);
	right: 0px;
	top: 46px;
	border-bottom: 2px dashed black;
	border-left: 2px dashed black;
	border-bottom-left-radius: 10px;
	padding: 10px;
	overflow-y: auto;
	overflow-x: hidden;
}
.header-dropdown-menu-item {
	padding-right: 5px;
}
.user-name-header {
	color: #000;
	font-size: 15pt;
	font-weight: bold;
}
/* /header */

/* footer */
.scrolling-footer {
	position: fixed;
	bottom: 0px;
	z-index: 9000;
	overflow: hidden;
	padding: 3px;
	/* background-color: #292929; */
	background-image: url(/images/dark-texture.png);
	color: #000;
	border-top: 2px dashed black;
	width: 100%;
}
.footer-size {
	height: 40px;
}
.height-100-header {
	height: calc(100% - 50px);
}
.height-100-footer {
	height: calc(100% - 40px);
}
.height-100-footer-15 {
	height: calc(100% - 40px - 15px);
}
/* /footer */

/* inputs */
::placeholder {
	font-style: italic;
	color: #adadad;
}
:placeholder-shown {} /* for styling the input when placeholder is shown */
/* /inputs */

/* spinner */
.spinner-backdrop {
	display: block;
	position: fixed;
	z-index: 10000;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
	background-color: rgba(0,0,0,0.65);
	backdrop-filter: blur(7px) contrast(60%) grayscale(85%);
	-webkit-backdrop-filter: blur(7px) contrast(60%) grayscale(85%);
}
.spinner-message {
	position: fixed;
	z-index: 10003;
	width: calc(100vw/2);
	top: 0px;
	left: 50%;
	transform: translate(-50%, 0%);
	color: #adadad;
	font-weight: bold;
	text-align: center;
	background-image: url(/images/dark-texture.png);
	border-left: 2px dashed black;
	border-right: 2px dashed black;
	border-bottom: 2px dashed black;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 10px;
}
.spinner-timer {
	position: fixed;
	z-index: 10003;
	width: 75px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #1bde09;
	font-weight: bold;
	text-align: right;
	/* border: 1px solid yellow; */
}
.spinner-timer:hover {
	color: #15ad07;
}
.spinner-content {
	text-align: center;
	position: fixed;
	z-index: 10002;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* opacity: 0.75; */
	color: #000;
	font-weight: bold;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: spinner-text-glow 1s ease-in-out infinite alternate;
}
@-webkit-keyframes spinner-text-glow {
  from {
    text-shadow:
			0 0 1px #00fffb,
			0 0 2px #00fffb,
			0 0 3px #00fffb,
			0 0 4px #00fffb,
			0 0 5px #00fffb,
			0 0 6px #00fffb,
			0 0 7px #00fffb
		;
  }
  to {
    text-shadow:
			0 0 2px #d0ff00,
			0 0 3px #d0ff00,
			0 0 4px #d0ff00,
			0 0 5px #d0ff00,
			0 0 6px #d0ff00,
			0 0 7px #d0ff00,
			0 0 8px #d0ff00
		;
  }
}
.spinner-close-button {
	float: right;
	padding-top: 10px;
  padding-right: 20px;
	font-size: 25px;
}
.spinner-icon {
  width: 25vw;
}
/* /spinner */

/* tags */
/* the picker: a tray of what is chosen, one box that filters and creates, and a capped
   scrolling field of chips.  Chips flow inline rather than sitting in a column grid -
   tag names are words of wildly different length and a grid either truncates the long
   ones or wastes a line on the short ones. */
.tag-picker-tray {
	border: 1px dashed #555;
	border-radius: 4px;
	background-color: rgba(255,255,255,0.05);
	padding: 0px 5px 6px 5px;
	margin-bottom: 8px;
}
.tag-picker-controls {
	position: relative;
}
.tag-picker-controls input {
	padding-right: 60px; /* room for the count sitting on top of the far end */
}
.tag-picker-count {
	position: absolute;
	right: 8px;
	top: 4px;
	font-size: 11px;
	pointer-events: none;
}
.tag-picker-list {
	max-height: 220px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0px 2px 8px 2px;
	margin-top: 4px;
	border-bottom: 1px dashed #333;
}
.tag-picker-hint {
	font-size: 11px;
	padding-top: 4px;
}
.tag-chip {
	display: inline-block;
	background-image: url(/images/dark-texture.png);
	border: 1px solid black;
	border-radius: 4px;
	padding: 3px 8px;
	margin: 6px 5px 0px 0px;
	white-space: nowrap;
	color: #aaa;
}
.tag-chip:hover {
	color: purple;
	border-color: #555;
}
/* the curated categories, told apart from everything a member has added */
.tag-chip-main {
	border-color: #0a7af2;
}
.tag-chip-selected {
	color: #1bde09;
	border-color: #1bde09;
	font-weight: bold;
}
.tag-chip-selected:hover {
	color: #f20f0f; /* clicking a chosen tag takes it off, so say so on hover */
	border-color: #f20f0f;
}
.tag-chip-new {
	color: #1bde09;
	border: 1px dashed #1bde09;
}
.tag-chip-count {
	color: #666;
	font-size: 10px;
	padding-left: 5px;
	vertical-align: super;
}
.tag-chip-x {
	color: #666;
	padding-left: 3px;
}
/* /tags */

/* file input */
.file-drop-box {
	border: 2px dashed gray;
	border-radius: 5px;
	padding: 5px;
	color: gray;
	background-color: rgba(255,255,255,0.075);
}
.file-drop-box-hover {
	border: 2px dashed white;
	color: white;
	background-color: rgba(255,255,255,0.25);
}
.upload-progress-track {
	height: 14px;
	border: 1px solid gray;
	border-radius: 7px;
	background-color: rgba(255,255,255,0.075);
	overflow: hidden;
}
.upload-progress-bar {
	height: 100%;
	width: 0;
	background-color: #5cb85c;
	transition: width 0.2s linear;
}
/* /file input */

/* random common stuff */
.nowrap {
	white-space: nowrap;
}
.clickable {
	cursor: pointer;
}
.block {
	width: 100%;
}
textarea.block {
	width: 100%;
	height: calc(100vh / 3);
}
.height-100 {
	height: 100%;
}
.width-0 {
	width: 0%;
}
.width-30 {
	width: 30px;
}
.width-60 {
	width: 60px;
}
.width-100 {
	width: 100%;
}
.width-50 {
	width: 50%;
}
table.wide {
	width: 100%;
}
table.padded {
	padding: 2px;
	border-spacing: 5px;
	border-collapse: separate;
}
.float-right {
	float: right;
}
.align-left {
	text-align: left;
}
.align-center, .align-middle {
	text-align: center;
}
.align-right {
	text-align: right;
}
.valign-top {
	display: table-cell;
	vertical-align: top;
}
.valign-middle, .valign-center {
	display: table-cell;
	vertical-align: middle;
}
.muted {
	color: #525252;
}
.padding-top-5 {
	padding-top: 5px;
}
.padding-top-10 {
	padding-top: 10px;
}
.padding-top-15 {
	padding-top: 15px;
}
.padding-top-20 {
	padding-top: 20px;
}
.padding-top-25 {
	padding-top: 25px;
}
.padding-top-100 {
	padding-top: 100px;
}
.padding-bottom-15 {
	padding-bottom: 15px;
}
.padding-bottom-100 {
	padding-bottom: 100px;
}
.padding-left-5 {
	padding-left: 5px;
}
.padding-left-10 {
	padding-left: 10px;
}
.padding-left-15 {
	padding-left: 15px;
}
.padding-left-20 {
	padding-left: 20px;
}
.padding-right-5 {
	padding-right: 5px;
}
.padding-right-10 {
	padding-right: 10px;
}
.outline-red {
	border: 1px solid red;
}
.outline-orange {
	border: 1px solid orange;
}
.outline-yellow {
	border: 1px solid yellow;
}
.outline-green {
	border: 1px solid green;
}
.outline-cyan {
	border: 1px solid cyan;
}
.outline-blue {
	border: 1px solid blue;
}
.outline-purple {
	border: 1px solid purple;
}
/* /random common stuff */

/* button colors */
.btn-babyblue {
	background-color: #d6e5ff;
}
.btn-babyblue:hover {
	background-color: #becde6;
}
.btn-green {
	color: white;
	background-color: #1bde09;
}
.btn-green:hover {
	color: white;
	background-color: #15ad07;
}
.btn-gray {
	color: black;
	background-color: #adadad;
}
.btn-gray:hover {
	color: white;
	background-color: #808080;
}
/* the "put it back how it was" button - reset in /content's filters.  Yellow because
   it is neither the thing you came to do (green, Apply) nor a way out (gray, Cancel):
   it changes the controls in front of you and changes nothing else.  Same yellow as
   the adolescent tier, which is the site's one yellow. */
.btn-yellow {
	color: black;
	background-color: #f5d742;
}
.btn-yellow:hover {
	color: black;
	background-color: #d9bd2e;
}
/* the one button that makes a verification on /users: red, because the box above it
   has just said what making one means */
.btn-red {
	color: white;
	background-color: #e0261b;
}
.btn-red:hover {
	color: white;
	background-color: #b51e15;
}
/* the audience tiers on /moderate, one colour each, keyed by the tier's name: the
   Apply button under each item wears the chosen tier's rule as .btn-tier-<key>, so
   the call is visible before it is made.  traffic lights - child green, adolescent
   yellow, adult red.  a tier with no rule here gets the plain .btn look, which is
   visible enough to prompt somebody to add one. */
.btn-tier-child {
	color: white;
	background-color: #1bde09;
}
.btn-tier-child:hover {
	color: white;
	background-color: #15ad07;
}
.btn-tier-adolescent {
	color: black;
	background-color: #f5d742;
}
.btn-tier-adolescent:hover {
	color: black;
	background-color: #d9bd2e;
}
.btn-tier-adult {
	color: white;
	background-color: #e0261b;
}
.btn-tier-adult:hover {
	color: white;
	background-color: #b51e15;
}
/* /button colors */

/* glyphicon/colors */
.glyphicon-25 {
	font-size: 25px;
}
.glyphicon-babyblue, .text-babyblue {
	color: #d6e5ff;
}
.glyphicon-babyblue:hover, .text-babyblue:hover {
	color: #becde6;
}
.glyphicon-blue, .text-blue {
	color: #0a7af2;
	/* text-shadow: 0px 0px 6px #b38619; */
}
.glyphicon-blue:hover, .text-blue:hover {
	color: #0864c7;
}
.glyphicon-black, .text-black {
	color: #000000;
	/* text-shadow: 0px 0px 7px #244746; */
}
.glyphicon-black:hover, .text-black:hover {
	color: #3b3b3b;
}
.glyphicon-black-blue {
	color: #000000;
	/* text-shadow: 0px 0px 7px #244746; */
}
.glyphicon-black-blue:hover {
	color: #0864c7;
}
.glyphicon-black-yellow {
	color: #000000;
}
.glyphicon-black-yellow:hover {
	color: #bdbd0f;
}
.glyphicon-black-purple {
	color: #000000;
}
.glyphicon-black-purple:hover {
	color: #8205b0;
}
.glyphicon-black-cyan {
	color: #000000;
}
.glyphicon-black-cyan:hover {
	color: #00a8a8;
}
.glyphicon-black-red {
	color: #000000;
}
.glyphicon-black-red:hover {
	color: #bd0f0f;
}
.glyphicon-black-green {
	color: #000000;
}
.glyphicon-black-green:hover {
	color: #15ad07;
}
.glyphicon-black- {
	color: #000000;
}
.glyphicon-black-purple:hover {
	color: #8205b0;
}
.glyphicon-white, .text-white {
	color: #ffffff;
}
.glyphicon-white:hover, .text-white:hover {
	color: #e3e3e3;
}
.glyphicon-gray, .text-gray {
	color: #adadad;
}
.glyphicon-gray:hover, .text-gray:hover {
	color: #808080;
}
.glyphicon-red, .text-red {
	color: #f20f0f;
	/* text-shadow: 0px 0px 4px #62f20f; */
}
.glyphicon-red:hover, .text-red:hover {
	color: #bd0f0f;
}
/* a message that goes away once the reader has seen it: add .faded and it fades out */
.fade-away {
	transition: opacity 0.5s ease;
}
.fade-away.faded {
	opacity: 0;
}
.glyphicon-orange, .text-orange {
	color: #f2660f;
}
.glyphicon-orange:hover, .text-orange:hover {
	color: #bd580f;
}
.glyphicon-yellow, .text-yellow {
	color: #f2e70f;
}
.glyphicon-yellow:hover, .text-yellow:hover {
	color: #bdbd0f;
}
.glyphicon-green, .text-green {
	color: #1bde09;
	/* text-shadow: 0px 0px 8px #b8078f; */
}
.glyphicon-green:hover, .text-green:hover {
	color: #15ad07;
}
.glyphicon-purple, .text-purple {
	color: #a509de;
}
.glyphicon-purple:hover, .text-purple:hover {
	color: #8205b0;
}
.glyphicon-cyan, .text-cyan {
	color: #00ffff;
}
.glyphicon-cyan:hover, .text-cyan:hover {
	color: #00a8a8;
}
/* /glyphicon/colors */
/* border colors */
.border-orange {
	border: 1px solid orange;
}
/* /border colors */
/* wordle */
.wordle-letter-input {
	width: 25px;
	text-align: center;
}
.wordle-suggested-word {
	padding: 5px;
	margin: 5px;
	border: 1px solid #111;
	border-radius: 3px;
}
.wordle-suggested-word:hover {
	background-color: #333;
}
.wordle-available-letter {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 9px;
	padding-left: 9px;
	margin: 3px;
	border: 1px solid #111;
	border-radius: 3px;
	font-weight: bold;
}
.wordle-available-letter:hover {
	background-color: #333;
}
/* /wordle */

/* moderation queue */
.moderation-tab {
	padding-right: 20px;
	white-space: nowrap;
}
.moderation-tab-selected {
	color: #5bc0de;
	font-weight: bold;
}
/* the heading, with the position, Delete All, and - on a phone, in place of the tabs -
   the audience select beside it */
.moderation-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.moderation-page-tools {
	display: flex;
	align-items: center;
	gap: 10px;
}
.moderation-audience-select {
	height: 30px;
	border-radius: 3px;
}
.moderation-tabs {
	padding-top: 10px;
	padding-bottom: 10px;
}
/* THE STAGE CAME FROM /content.  .content-stage, .content-arrow, .content-viewport,
   .content-slide, .content-scroll, .content-item-* and .content-media are all in the
   content feed block below and this page uses them unchanged - the same reason both
   pages use one .moderation-modal shell and one .pager.  Two things meant to behave
   identically, defined twice, is how they stop behaving identically.

   THE DOCK is the one thing /content has no equivalent of: the verdict controls, under
   the stage rather than inside a sliding panel, because they are a form.  A reason box
   half typed into must not slide away under a finger.  psyContentStage takes its height
   off the stage's (the selector is on the attribute in moderate.php), so the controls
   and the picture they are about are on screen together. */
.moderation-dock {
	background-image: url(/images/dark-texture.png);
	border: 2px dashed black;
	border-radius: 4px;
	padding: 10px;
	margin-top: 8px;
}
/* WHAT IS BEING JUDGED, pinned to the bottom of the panel rather than left under the
   picture.  /content learned this with its vote bar: a thing below a full height image
   is found by scrolling or not at all - and who posted this, what it is tagged and who
   complained about it are half of the call being made.  Inside the panel, so it slides
   with the item it describes, unlike the dock.

   A capped share of the panel with its own scroll: nine complaints with reasons would
   otherwise be the panel, and the picture the thing nobody could find. */
.moderation-item-facts {
	flex: 0 0 auto;
	max-height: 40%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 8px 10px;
	text-align: left;
	border-top: 1px solid #333;
	background-color: rgba(0,0,0,0.25);
}
/* the first line sits against the rule above it; padding-top belongs between the lines */
.moderation-item-facts .content-item-meta:first-child {
	padding-top: 0px;
}
/* one open report in the `reported` bucket: who said it and what they said.  Indented
   behind a line so a stack of them reads as a list of complaints and not as part of
   the item's own details.  Admin and above; a moderator's rows carry none of this. */
.moderation-report {
	margin-top: 5px;
	padding-left: 8px;
	border-left: 2px solid #555;
	word-break: break-word;
}
/* the verdict controls, the partial the dock renders.  the select sits in front of the
   reason box, which fills the rest of the line; the buttons under them sit in a row,
   and on a phone stack full width (the phone block below). */
.verdict-pick {
	display: flex;
	align-items: center;
	gap: 8px;
}
.verdict-select {
	flex: 0 0 auto;
	height: 30px;
	border-radius: 3px;
}
.verdict-reason {
	flex: 1 1 auto;
	min-width: 0px;
	height: 30px;
	border-radius: 3px;
	padding: 0px 6px;
}
.verdict-buttons {
	padding-top: 10px;
}
/* THE MODAL SHELL.  Started as /moderate's full size viewer, which is gone; it is now
   the AI workflow's, Delete All's, and /content's filters and report boxes.  The prefix
   is history - the shell is the site's.

   z-index sits ABOVE the scrolling footer (9000) and BELOW the spinner (10000-10003) on
   purpose: the footer must not overlap the media, and the spinner must still cover the
   modal while a verdict is saving. */
.moderation-modal-backdrop {
	display: block;
	position: fixed;
	z-index: 9500;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.65);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}
.moderation-modal {
	position: fixed;
	z-index: 9501;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	width: calc(100vw - 40px);
	max-width: 1100px;
	max-height: calc(100vh - 40px);
	/* iOS: 100vh is the viewport with the toolbars HIDDEN, so a modal sized by it runs
	   under them whenever they are showing - taller than the screen, footer out of
	   reach.  dvh follows the toolbars.  The vh line above stays as the fallback for a
	   browser that does not know dvh, which ignores this one. */
	max-height: calc(100dvh - 40px);
	background-image: url(/images/dark-texture.png);
	border: 2px dashed black;
	border-radius: 4px;
}
.moderation-modal-header {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 2px dashed black;
}
.moderation-modal-title {
	flex: 1 1 auto;
	min-width: 0px;
}
.moderation-modal-close {
	flex: 0 0 auto;
	padding: 0px 9px;
	height: 30px;
}
/* the one part that scrolls, so the controls below stay put however tall the media is */
.moderation-modal-body {
	flex: 1 1 auto;
	min-height: 0px;
	overflow: auto;
	/* a scroll that reaches the top or bottom of this box stops here rather than
	   chaining to the page behind it.  on iOS that chain is a pull-to-refresh; the
	   touchmove guard in moderate.js is the belt to this brace, for the drags that
	   never touch a scroller at all. */
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 12px;
	text-align: center;
}
.moderation-modal-footer {
	flex: 0 0 auto;
	padding: 10px 12px;
	border-top: 2px dashed black;
}
/* the AI training modal: the same shell, wider, with the image beside the AI's answer
   rather than above the buttons - the two are read together */
.moderation-modal-wide {
	max-width: 1400px;
}
.trainer-body {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-align: left;
}
.trainer-media {
	flex: 1 1 55%;
	min-width: 0px;
	text-align: center;
}
.trainer-image {
	max-width: 100%;
	max-height: calc(100vh - 260px);
	max-height: calc(100dvh - 260px);
	border: 1px solid #111;
	border-radius: 3px;
}
.trainer-panel {
	flex: 1 1 45%;
	min-width: 0px;
}
.trainer-label {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #525252;
	padding-bottom: 4px;
}
.trainer-label .muted, .trainer-label a {
	text-transform: none;
	letter-spacing: normal;
}
/* the prompt is shown verbatim: it is exactly what the model is sent */
.trainer-prompt {
	white-space: pre-wrap;
	word-break: break-word;
	font-family: monospace;
	font-size: 12px;
	background-color: rgba(0,0,0,0.35);
	border: 1px solid #111;
	border-radius: 3px;
	padding: 8px;
	max-height: 180px;
	overflow: auto;
}
.trainer-prompt-small {
	max-height: 90px;
	font-size: 11px;
}
/* the answer format, which lives in code and follows the guidance on every call */
.trainer-prompt-fixed {
	margin-top: 4px;
	color: #8a8a8a;
	border-style: dashed;
}
.trainer-history {
	max-height: 240px;
	overflow: auto;
	padding-top: 4px;
}
.trainer-history-item {
	border-top: 1px dashed #333;
	padding: 6px 0px;
	font-size: 12px;
}
.trainer-answer {
	border: 1px dashed #333;
	border-radius: 3px;
	padding: 8px;
	min-height: 60px;
}
.trainer-answer-raw {
	font-family: monospace;
	font-size: 13px;
	white-space: pre-wrap;
	word-break: break-word;
}
.trainer-suggestion {
	font-weight: bold;
}
.trainer-feedback {
	width: 100%;
	height: 90px;
}
/* the note box above the buttons, their width, like the reason box in the dock */
.trainer-note {
	width: 100%;
	height: 30px;
	border-radius: 3px;
	padding: 0px 6px;
}
/* the AI workflow reached the end of the bucket.  a line, not a picture - there is no
   longer an item to show. */
.trainer-done {
	padding: 30px 10px;
	text-align: center;
}
/* Delete All: narrow, text left, and the warning set apart so it cannot be skimmed
   past on the way to the red button.  Same shape as the verification box on /users. */
.moderation-discard-all {
	max-width: 560px;
}
.moderation-discard-warning {
	margin-top: 10px;
	padding: 10px;
	text-align: left;
	border: 1px solid #e0261b;
	border-radius: 3px;
	background-color: rgba(224,38,27,0.08);
}
.moderation-discard-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
/* the page behind an open modal does not scroll.  moderate.js puts this class on
   <body> while either modal is open.  a wheel over the backdrop has nowhere to go; a
   finger on iOS is handled in the controller, because overflow: hidden alone does not
   stop a touch drag from reaching the page there. */
body.modal-open {
	overflow: hidden;
	overscroll-behavior: none;
}
/* on a phone the modal IS the screen: no centring, no margins, no rounded corners.
   top/bottom 0 rather than a height, so the box follows the toolbars as they come
   and go.  the body still scrolls inside it and the footer stays put. */
@media (max-width: 767px) {
	.moderation-modal {
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		transform: none;
		width: auto;
		max-width: none;
		max-height: none;
		border-width: 0px;
		border-radius: 0px;
	}
	.moderation-modal-header {
		padding: 8px 10px;
	}
	.moderation-modal-body {
		padding: 10px;
	}
	.moderation-modal-footer {
		padding: 8px 10px;
	}
	/* the body scrolls, so the picture may be as tall as it is */
	.trainer-image {
		max-height: none;
	}
	/* the two columns stack, picture first */
	.trainer-body {
		flex-direction: column;
	}
	/* the dock gives its width to the controls: no border, no texture, and it sits
	   right under the stage.  the page is the screen on a phone and a dashed box
	   around four stacked buttons is a box for the sake of one. */
	.moderation-dock {
		border-width: 0px;
		border-radius: 0px;
		background-image: none;
		padding: 6px 0px 0px 0px;
		margin-top: 0px;
	}
	/* every button under a verdict, and every button in a modal's footer, is a full
	   width row of its own: a row of them wraps into a wall on a phone */
	.verdict-buttons {
		padding-top: 4px;
	}
	.verdict-buttons .btn, .moderation-modal-footer .btn {
		display: block;
		width: 100%;
		margin: 6px 0px 0px 0px;
	}
	/* two buttons that belong side by side stay side by side: Cancel next to the red
	   one is a pair, not a list.  Same exception /content's report box makes. */
	.moderation-modal-footer.moderation-discard-footer .btn {
		display: inline-block;
		width: auto;
		margin: 0px;
	}
}
/* /moderation queue */

/* pager

   /users' control.  It was shared with /moderate, which is why it is not called
   .users-* any more; /moderate now shows one item at a time and has no list to page,
   so /users is the only caller again.  The name stays general: the next paged list
   uses this one rather than a second copy under a third prefix.  (.pager-standalone,
   the bordered variant /moderate needed, went with it.) */
.pager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 10px;
	border-top: 2px dashed black;
}
/* the top bar of a pair; its rule lives on the bottom edge instead */
.pager-top {
	border-top: 0px;
	border-bottom: 2px dashed black;
}
.pager-status, .pager-count {
	white-space: nowrap;
}
.pager-label {
	margin: 0;
	font-weight: normal;
	white-space: nowrap;
}
.pager-input {
	height: 30px;
	width: 56px;
	text-align: center;
	border-radius: 3px;
}
.pager-per-page-select {
	height: 30px;
	width: 74px;
	border-radius: 3px;
}
/* /pager */

/* content feed

   One post at a time.  The stage under the heading is a row - an arrow, the viewport, an
   arrow - sized by psyContentStage to what is left of the screen, so the post scrolls
   inside its own box and the arrows stay where they are.  Three panels sit in the
   viewport at -100% / 0 / +100% and the transform transitions when their roles change:
   that is the slide.  On a phone the arrows go, the padding nearly goes, and a swipe
   does the moving.

   /moderate shows its queue on exactly that, and adds the verdict dock under the stage
   - .moderation-dock, in the moderation block above.  /content started it and since
   2026-10-12 has outgrown it: it is the whole window (THE SCREEN, .content-cv, at the
   end of this block), keeping the viewport, the panels and the slide and dressing them
   for full screen under its own class, so nothing here changes under /moderate.  The
   `content` prefix is history, the same way .moderation-modal's is. */
.content-position {
	white-space: nowrap;
}
/* the strip above the stage when a shared `?post=` could not be placed in this reader's
   stream.  It appears after the stage has already measured itself, which is what the
   psy-stage-refit broadcast is for. */
.content-post-notice {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0px;
	padding: 8px 10px;
	border: 1px solid #5bc0de;
	border-radius: 3px;
	background-color: rgba(91,192,222,0.08);
}
.content-post-notice-text {
	flex: 1 1 auto;
	min-width: 0px;
}
.content-post-notice-x {
	padding: 0px 9px;
	height: 30px;
}
.content-stage {
	display: flex;
	align-items: stretch;
	height: 400px; /* the placeholder; psyContentStage sets the real one */
}
.content-arrow {
	flex: 0 0 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px;
	background: transparent;
	border: 0px;
	color: #aaa;
	font-size: 34px;
}
.content-arrow:hover:not(:disabled) {
	color: #5bc0de;
}
.content-arrow:disabled {
	color: #333;
	cursor: default;
}
.content-viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0px;
	overflow: hidden;
	/* the browser may scroll vertically on its own; horizontal is ours (psyContentSwipe) */
	touch-action: pan-y;
	border: 1px solid #111;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.25);
}
/* a column: the post scrolls in the top of it and the vote/report bar is pinned to the
   bottom.  The bar is a CONTROL, not a caption - inside the scroller it sits under a
   full height picture, where it is found by scrolling or not at all. */
.content-slide {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease;
	will-change: transform;
}
.content-slide-prev    { transform: translateX(-100%); }
.content-slide-current { transform: translateX(0%);    }
.content-slide-next    { transform: translateX(100%);  }
/* while a finger has the panels, they follow it with no easing */
.content-viewport.is-dragging .content-slide {
	transition: none;
}
/* the one part that scrolls.  a scroll that reaches its end stops here rather than
   chaining to the page behind it - on iOS that chain is a pull-to-refresh. */
.content-scroll {
	/* flex, not height:100%: it takes what the pinned bar below it leaves.  min-height
	   0 is what lets a flex child shrink below its content and scroll at all. */
	flex: 1 1 auto;
	min-height: 0px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 10px;
}
.content-notice {
	padding: 40px 10px;
	text-align: center;
}
.content-item-title {
	padding-bottom: 8px;
}
.content-item-media {
	text-align: center;
}
/* width and height come from the row as attributes; height:auto turns them into an
   aspect ratio, so the box has its shape before the bytes arrive */
.content-media {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0px auto;
	border: 1px solid #111;
	border-radius: 3px;
	background-color: #0c0c0c;
}
.content-item-description {
	padding-top: 8px;
	white-space: pre-wrap;
	word-break: break-word;
}
.content-item-meta {
	padding-top: 5px;
}
/* why this post is at the top of the stream.  A quiet word beside the name rather than a
   badge: it is an explanation of the ordering, not a claim about the poster. */
.content-following-tag {
	padding: 0px 5px;
	margin-left: 5px;
	border: 1px solid #2f4f7a;
	border-radius: 3px;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6fa8ff;
}
.content-item-tags {
	padding-top: 4px;
}
/* the report box: the modal shell again, narrow - it asks one optional question */
.content-report {
	max-width: 520px;
}
/* height auto, or `textarea.block` gives it a third of the viewport - which is the
   right size for the post box on /post and three times the size of one optional line.
   Spelt `textarea.` to match that rule's specificity; a bare class loses to it. */
textarea.content-report-reason {
	height: auto;
	min-height: 80px;
	resize: vertical;
}
.content-report-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
@media (max-width: 767px) {
	.moderation-modal-footer.content-report-footer .btn {
		display: inline-block;
		width: auto;
		margin: 0px;
	}
}
/* the filters modal: the /moderate shell (.moderation-modal*, the prefix is history)
   with the sketch inside it */
.content-filters {
	max-width: 640px;
}
.content-filters-body {
	text-align: left;
}
.content-filter-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 4px 0px;
}
/* wide enough for the longest of the three group names, so the include selects under
   Subscribed, New and Old line up in a column rather than stepping in and out */
.content-filter-label {
	display: inline-block;
	min-width: 86px;
	font-weight: bold;
}
.content-filter-select {
	height: 30px;
	border-radius: 3px;
}
.content-filter-hint {
	font-size: 11px;
}
.content-filter-checks {
	gap: 18px;
}
.content-filter-check {
	font-weight: normal;
	margin: 0px;
}
.content-filter-heading {
	padding-top: 12px;
	padding-bottom: 4px;
	font-weight: bold;
}
.content-filter-heading .muted {
	font-weight: normal;
	font-size: 11px;
}
.content-filter-search {
	height: 30px;
	border-radius: 3px;
	padding: 0px 6px;
}
.content-filters-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.content-filters-buttons {
	display: flex;
	gap: 8px;
}
@media (max-width: 767px) {
	/* very little at the sides: the column's 15px down to 5, and the frame's own edges
	   gone so the picture is as wide as the phone allows */
	.content-stage {
		margin-left: -10px;
		margin-right: -10px;
	}
	.content-viewport {
		border-left: 0px;
		border-right: 0px;
		border-radius: 0px;
	}
	.content-scroll {
		padding: 6px 4px 10px 4px;
	}
	/* the shell stacks a footer's buttons full width on a phone; Cancel and Apply sit
	   side by side here, as drawn */
	.moderation-modal-footer.content-filters-footer .btn {
		display: inline-block;
		width: auto;
		margin: 0px;
	}
}

/* the lens chip on /content: whose stream this is, and the way out of it.  it sits with
   the position and the Filters button because that is the row that says what the list
   currently is. */
.content-scope {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 4px 2px 10px;
	border: 1px solid #0a7af2;
	border-radius: 12px;
	color: #d6e5ff;
	white-space: nowrap;
}
.content-scope-x {
	font-size: 10px;
	padding: 3px;
	color: #adadad;
}
.content-scope-x:hover {
	color: #f20f0f;
}
/* the Filters button wears the word while a lens is on, so nothing typed into the modal
   looks like it is being kept */
.content-filters-temp {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.8;
}
/* the list as it stands, the first line of the Filters box: the total and each group */
.content-filters-summary {
	margin-bottom: 8px;
	text-align: left;
	font-size: 12px;
}
.content-filters-temp-note {
	margin-bottom: 6px;
	padding: 8px 10px;
	border: 1px solid #0a7af2;
	border-radius: 3px;
	background-color: rgba(10,122,242,0.10);
	font-size: 11px;
}
/* THE SCREEN.  /content as drawn on 2026-10-12: the page is the whole window, the post as
   wide as it, and the controls fixed over it at the edges.  Re-organised 2026-10-13 so the
   post reads the way a comment does: along the top the lens, Filters (labelled with the
   position), the menu and the X, then the poster and how long ago, then the title; along
   the bottom one row, the vote and the comments on the left and Tags on the right.  The
   template's head comment is the drawing.

   Above the site's footer (9000) and below the modal shell (9500) and the spinner
   (10000+): a modal opened from here is in front of it, and the footer is not.

   --cv-top and --cv-bottom are the heights of the two fixed bands, and they are FIXED -
   set here, never measured - so the post can be padded clear of them with nothing to
   wait for.  The title, which varies, is the one exception, and each panel carries its
   own invisible copy of it to make the room (.content-cv-title-spacer). */
.content-cv {
	/* the bar, then the poster's row, then the title (which varies, and has its spacer);
	   the bottom is one 44px row and its padding */
	--cv-bar: 54px;
	--cv-who: 26px;
	--cv-top: calc(var(--cv-bar) + var(--cv-who));
	--cv-bottom: 56px;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 9100;
	/* hidden makes it a scroll container, and that is what lets overscroll-behavior stop
	   a wheel over the bars chaining to the page behind */
	overflow: hidden;
	overscroll-behavior: contain;
	background-color: #000;
	color: #c8c8c8;
}
/* muted is #525252, which is for a textured page; on black it is barely there */
.content-cv .muted {
	color: #8a8a8a;
}
body.content-cv-open {
	overflow: hidden;
	overscroll-behavior: none;
}
/* the stage is the window.  .content-viewport and .content-slide are the shared stage's
   (the swipe looks for them by name); here they lose the frame and fill the screen */
.content-cv .content-cv-viewport {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	border: 0px;
	border-radius: 0px;
	background-color: transparent;
}
/* absolute rather than flexed: a definite height, which the frame's min-height: 100%
   needs, and the vote bar that used to share the panel is on the screen now */
.content-cv .content-scroll {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	padding: 0px;
	/* no scrollbar: it would make the panel narrower than the bands over it, and the
	   title spacer only holds the right room if the two wrap the same */
	scrollbar-width: none;
}
.content-cv .content-scroll::-webkit-scrollbar {
	display: none;
}
/* a column at least the window's height, padded clear of the two bands.  The item sits
   on auto margins: centred when it is shorter than the room, and from the top, scrolling,
   when it is taller - which justify-content: center cannot do without cutting off the top
   of a tall one. */
.content-cv-frame {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: var(--cv-top) 0px var(--cv-bottom) 0px;
}
.content-cv-frame > .content-notice,
.content-cv-item {
	margin: auto 0px;
	flex: 0 0 auto;
}
/* nothing loaded, or nothing to show: in the middle of the window */
.content-cv-notice {
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0px;
	transform: translateY(-50%);
}
/* AS WIDE AS THE SCREEN, the shape kept: width and height come from the row as
   attributes, and height: auto turns them into the ratio before the bytes arrive.  A
   small web copy is scaled up - as much of the screen as possible was the ask. */
.content-cv .content-media {
	width: 100%;
	max-width: none;
	height: auto;
	border: 0px;
	border-radius: 0px;
	background-color: transparent;
}
/* a VIDEO fits whole, between the title and the bottom bar: a player whose controls are
   below the fold is not a player.  The box stays full width and the picture letterboxes
   inside it.  --cv-title is set on the panel by psyContentTitleSpacer. */
.content-cv video.content-media {
	max-height: calc(100vh - var(--cv-top) - var(--cv-bottom) - var(--cv-title, 0px));
	max-height: calc(100dvh - var(--cv-top) - var(--cv-bottom) - var(--cv-title, 0px));
	background-color: #000;
}
/* ON A DESKTOP A PICTURE FITS THE SCREEN'S HEIGHT, the way a video does everywhere
   (Jesse, 2026-10-12): at screen width a portrait photo on a wide monitor was several
   screens tall.  The box stays full width and object-fit letterboxes the picture inside
   it, so it is scaled to the largest size that fits - up as well as down.  A phone keeps
   screen width and the scroll, which is what a phone is for. */
@media (min-width: 768px) {
	.content-cv img.content-media {
		max-height: calc(100vh - var(--cv-top) - var(--cv-bottom) - var(--cv-title, 0px));
		max-height: calc(100dvh - var(--cv-top) - var(--cv-bottom) - var(--cv-title, 0px));
		object-fit: contain;
	}
}
/* under the post, and scrolling with it */
.content-cv-description {
	padding: 10px 14px 0px 14px;
	white-space: pre-wrap;
	word-break: break-word;
	text-align: left;
}
/* THE TWO BANDS.  Click-through except where there is something to press, so a drag
   that starts on the title still scrolls the post and a swipe still swipes.  A scrim
   behind each, nearly solid - a description scrolling under the poster's name is text
   on text otherwise.  No fade past the edge: the post is padded to start exactly
   there, and a fade would dim the top of every picture at rest. */
.content-cv-top,
.content-cv-bottom {
	position: absolute;
	left: 0px;
	right: 0px;
	z-index: 3;
	pointer-events: none;
}
.content-cv-top button,
.content-cv-bottom button,
.content-cv-lens .content-scope,
.content-cv-top .content-post-notice,
.content-cv-poster > span,
.content-cv-age {
	pointer-events: auto;
}
.content-cv-top {
	top: 0px;
	background-color: rgba(0,0,0,0.78);
}
.content-cv-bottom {
	bottom: 0px;
	height: var(--cv-bottom);
	padding: 6px 10px 6px 10px;
	background-color: rgba(0,0,0,0.78);
}
/* three columns, the middle one sized to the Filters button and the two sides equal, so
   Filters is in the middle of the screen however long the lens chip is */
.content-cv-top .content-cv-bar {
	display: grid;
	grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr);
	align-items: center;
	gap: 8px;
	height: var(--cv-bar);
	padding: 0px 10px;
}
/* the position, as the Filters button's label: current/total */
.content-cv-position {
	font-size: 13px;
	line-height: 16px;
	font-weight: bold;
	color: #ddd;
}
/* the controls' own button: dark and see-through, because it sits on a picture */
.content-cv-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	min-width: 36px;
	padding: 0px 10px;
	border: 1px solid #5a5a5a;
	border-radius: 4px;
	background-color: rgba(24,24,24,0.75);
	color: #ddd;
	white-space: nowrap;
}
.content-cv-btn:hover:not(:disabled) {
	border-color: #5bc0de;
	color: #fff;
}
.content-cv-btn:disabled {
	opacity: 0.45;
	cursor: default;
}
/* Filters, with the drop-down mark in a box of its own, as drawn */
.content-cv-filters {
	padding-right: 0px;
}
.content-cv-caret {
	display: inline-flex;
	align-items: center;
	align-self: stretch;
	margin-left: 10px;
	padding: 0px 8px;
	border-left: 1px solid #5a5a5a;
	font-size: 11px;
}
/* the right of the bar: the menu, alone since the X went (2026-10-13) */
.content-cv-exit {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.content-cv-more {
	padding: 0px;
	font-size: 15px;
}
/* the menu button LIT: amber while the post is hidden, red once it is deleted - the poster
   of a hidden post sees it for that reason alone */
.content-cv-btn.content-cv-pressed {
	border-color: #5bc0de;
}
.content-cv-btn.content-cv-lit-hidden {
	color: #fff;
	border-color: #e0a01b;
	background-color: #b8860b;
}
.content-cv-btn.content-cv-lit-deleted {
	color: #fff;
	border-color: #e0261b;
	background-color: #e0261b;
}
/* the lens chip, on the left of the bar; a long name is cut, not wrapped */
.content-cv-lens {
	min-width: 0px;
	display: flex;
	align-items: center;
}
.content-cv-lens .content-scope {
	max-width: 100%;
	background-color: rgba(10,30,60,0.8);
}
.content-scope-name {
	min-width: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* WHO POSTED IT, AND WHEN: a comment's top row - the name on the left, the age on the
   right - under the bar and over the title */
.content-cv-who {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: var(--cv-who);
	padding: 0px 12px;
}
.content-cv-age {
	flex: 0 0 auto;
	font-size: 11px;
	color: #8a8a8a;
	text-shadow: 0px 1px 2px #000;
}
/* THE MENU'S DROP-DOWN, under its button at the right of the bar, over everything on the
   screen; the layer behind it is there to catch the tap that closes it.  A pixel lower and
   10% see-through (Jesse, 2026-10-13) - the background, not the words. */
.content-cv-menu-catch {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 4;
}
.content-cv-menu {
	position: absolute;
	top: calc(var(--cv-bar) - 5px);
	right: 10px;
	z-index: 5;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 160px;
	padding: 4px;
	border: 1px solid #5a5a5a;
	border-radius: 4px;
	background-color: rgba(18,18,18,0.9);
	box-shadow: 0px 4px 14px rgba(0,0,0,0.6);
}
/* the line under Home, between leaving the page and the post's own items */
.content-cv-menu-sep {
	height: 1px;
	margin: 2px 6px;
	background-color: #5a5a5a;
}
.content-cv-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0px 12px;
	border: 0px;
	border-radius: 3px;
	background-color: transparent;
	color: #ddd;
	font-size: 14px;
	text-align: left;
}
.content-cv-menu-item:hover:not(:disabled) {
	background-color: #2a2a2a;
	color: #fff;
}
.content-cv-menu-item:disabled {
	opacity: 0.45;
	cursor: default;
}
/* lit, and fully there even where it cannot be pressed: that is the message */
.content-cv-menu-item.content-cv-menu-reported,
.content-cv-menu-item.content-cv-menu-hidden,
.content-cv-menu-item.content-cv-menu-deleted {
	opacity: 1;
}
.content-cv-menu-item.content-cv-menu-reported {
	color: #e0261b;
}
/* a setting that is on - Muted */
.content-cv-menu-item.content-cv-menu-on,
.content-cv-menu-item.content-cv-menu-on:hover:not(:disabled) {
	color: #fff;
	background-color: #2f4f7a;
}
.content-cv-menu-item.content-cv-menu-hidden,
.content-cv-menu-item.content-cv-menu-hidden:hover:not(:disabled) {
	color: #fff;
	background-color: #b8860b;
}
.content-cv-menu-item.content-cv-menu-deleted {
	color: #fff;
	background-color: #e0261b;
}
/* THE TITLE, left, under the poster - read with the name, as a comment's message is.
   Three lines at most; the whole of it is in the Tags box.  The spacer in each panel is
   this same box, invisible - the clamp is on the inner span so the padding cannot show a
   fourth line. */
.content-cv-title {
	padding: 0px 12px 6px 12px;
	text-align: left;
	font-size: 15px;
	line-height: 20px;
	font-weight: bold;
	color: #eee;
	text-shadow: 0px 1px 3px #000;
}
.content-cv-title-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
.content-cv-title-spacer {
	flex: 0 0 auto;
	visibility: hidden;
}
.content-cv-top .content-post-notice {
	margin: 4px 10px 8px 10px;
	background-color: rgba(8,28,36,0.95);
}
/* the poster's name, in the row under the bar */
.content-cv-poster {
	min-width: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: bold;
	color: #ddd;
	text-shadow: 0px 1px 2px #000;
}
.content-cv-bottom .content-cv-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 44px;
}
.content-cv-votes {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.content-cv-vote {
	padding: 0px;
	font-size: 15px;
}
/* the one number between the arrows: green above zero, gray at zero, red below */
.content-cv-score {
	min-width: 34px;
	text-align: center;
	font-weight: bold;
	color: #8a8a8a;
	text-shadow: 0px 1px 2px #000;
}
.content-cv-score-up {
	color: #1bde09;
}
.content-cv-score-down {
	color: #e0261b;
}
/* the arrow this account pressed: green up, red down */
.content-cv-vote-up.content-cv-mine,
.content-cv-vote-up.content-cv-mine:hover:not(:disabled) {
	color: #fff;
	border-color: #1bde09;
	background-color: #1bde09;
}
.content-cv-vote-down.content-cv-mine,
.content-cv-vote-down.content-cv-mine:hover:not(:disabled) {
	color: #fff;
	border-color: #e0261b;
	background-color: #e0261b;
}
/* the bottom's two ends: the vote on the left, the comments on the right (the tags are
   in the menu beside the X since 2026-10-13) */
.content-cv-react,
.content-cv-actions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.content-cv-comments {
	font-size: 15px;
}
/* a COMMENT's flag, hide and delete (the post's are in the menu beside the X now) */
.content-cv-btn.cmt-btn.content-cv-hide,
.content-cv-btn.cmt-btn.content-cv-delete {
	font-size: 12px;
}
/* reported: lit and pressed in, and no longer a button anybody can press again */
.content-cv-report.content-cv-reported,
.content-cv-report.content-cv-reported:disabled {
	opacity: 1;
	color: #e0261b;
	border-color: #e0261b;
}
/* a comment HIDDEN, and DELETED: the button lit - amber for hidden, red for deleted - and
   fully there even where it cannot be pressed, because for a hidden comment's author the
   lit button IS the message */
.content-cv-btn.content-cv-hide.content-cv-lit,
.content-cv-btn.content-cv-hide.content-cv-lit:disabled {
	opacity: 1;
	color: #fff;
	border-color: #e0a01b;
	background-color: #b8860b;
}
.content-cv-btn.content-cv-delete.content-cv-lit,
.content-cv-btn.content-cv-delete.content-cv-lit:disabled {
	opacity: 1;
	color: #fff;
	border-color: #e0261b;
	background-color: #e0261b;
}
.content-cv-tags-n {
	padding-left: 5px;
	font-size: 12px;
	color: #8a8a8a;
}
/* a desktop's arrows, over the post at either side - gone only when the list is one post,
   since it goes round from its end to its start */
.content-cv .content-cv-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 48px;
	height: 96px;
	transform: translateY(-50%);
	border-radius: 4px;
	background-color: rgba(0,0,0,0.35);
	color: #bbb;
}
.content-cv .content-cv-arrow:disabled {
	visibility: hidden;
}
.content-cv-arrow-prev {
	left: 6px;
}
.content-cv-arrow-next {
	right: 6px;
}
/* the tags box: the modal shell, narrow, the chips wrapping and the body scrolling */
.content-tags {
	max-width: 520px;
}
.content-tags-body {
	text-align: left;
	line-height: 2;
}
/* Edit: the shared picker, set as it is on /post */
.content-tags-editing {
	line-height: 1.42857143;
}
.content-tags-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.content-tags-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
@media (max-width: 767px) {
	/* the shell stacks a footer's buttons full width on a phone; these sit in a row */
	.moderation-modal-footer.content-tags-footer .btn {
		display: inline-block;
		width: auto;
		margin: 0px;
	}
}
/* THE COMMENTS: the modal shell, the post's thumbnail on the left of the header as the
   way back to it, "Comments" in the middle, the X on the right - three columns, the
   sides equal, so the word is centred */
.content-comments {
	max-width: 640px;
}
.moderation-modal-header.content-comments-header {
	display: grid;
	grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr);
	align-items: center;
}
.content-comments-thumb {
	justify-self: start;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0px;
	overflow: hidden;
	border: 1px solid #5a5a5a;
	border-radius: 4px;
	background-color: #111;
	color: #8a8a8a;
	font-size: 16px;
}
.content-comments-thumb:hover {
	border-color: #5bc0de;
}
.content-comments-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.content-comments-title {
	font-size: 16px;
	text-align: center;
}
.content-comments-header .moderation-modal-close {
	justify-self: end;
}
.content-comments-body {
	text-align: left;
}
.content-comments-notice {
	padding: 12px 0px;
	text-align: center;
}
/* THE LEFT SIDE IS KEPT TIGHT (Jesse, 2026-10-13): every level of replies costs its
   width again, and a thread a few deep runs out of room on a phone.  So the box is 16px
   with a gap of 4, and a level of replies steps in 10px - the numbers below are tied to
   each other, and are worked out in the comments beside them. */
.moderation-modal-body.content-comments-body {
	padding: 8px 6px;
}
/* the three most voted up, together and set apart - no label, the edge says it */
.content-comments-group + .content-comments-group {
	margin-top: 8px;
}
.content-comments-top {
	padding: 0px 4px;
	border: 1px solid rgba(212,160,23,0.55);
	border-radius: 4px;
	background-color: rgba(212,160,23,0.07);
}
/* ONE COMMENT: a column for the [+] / [-] box, then the card - name and age, the
   message, the vote on the left and the reply count, reply and flag on the right */
.cmt-row {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	padding: 6px 0px;
}
.cmt-gutter {
	position: relative;
	align-self: stretch;
	flex: 0 0 16px;
	width: 16px;
	min-height: 22px;
}
/* open: the line starts right under the box (3px down + 16px tall = 19px) and runs down
   the comment to its replies, where .cmt-kids' border carries it on - at 7px, the
   middle of the box, which is where that border is too */
.cmt-open > .cmt-row > .cmt-gutter::after {
	content: '';
	position: absolute;
	top: 19px;
	bottom: -6px;
	left: 7px;
	border-left: 1px solid #5a5a5a;
}
/* 16px, 3px down so its middle is the middle of the name's 22px line.  Small to look
   at and not to press: ::before reaches 6px past it on every side, so a finger has
   28px to land on. */
.cmt-toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	padding: 0px;
	border: 1px solid #8a8a8a;
	border-radius: 3px;
	background-color: rgba(24,24,24,0.75);
	color: #ddd;
	font-size: 8px;
}
.cmt-toggle::before {
	content: '';
	position: absolute;
	top: -6px;
	right: -6px;
	bottom: -6px;
	left: -6px;
}
.cmt-toggle:hover {
	border-color: #5bc0de;
	color: #fff;
}
.cmt-card {
	flex: 1 1 auto;
	min-width: 0px;
}
.cmt-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	line-height: 22px;
}
.cmt-name {
	min-width: 0px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-weight: bold;
}
.cmt-age {
	flex: 0 0 auto;
	font-size: 11px;
}
/* the message, as typed: its line breaks kept and a long word broken */
.cmt-body {
	padding: 2px 0px 6px 0px;
	white-space: pre-wrap;
	word-break: break-word;
}
/* hidden: dimmed, and the Hide button lit is what says why */
.cmt-held > .cmt-row .cmt-body {
	opacity: 0.6;
}
/* wraps rather than overflowing: a moderator's row is six controls, and a reply a few
   levels in has less room for them */
.cmt-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 8px;
}
.cmt-votes,
.cmt-actions {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
/* the screen's own button, smaller */
.content-cv-btn.cmt-btn {
	height: 28px;
	min-width: 28px;
	padding: 0px 6px;
	font-size: 12px;
}
/* a reply arrow: the share arrow, turned to point back */
.cmt-reply .glyphicon {
	transform: scaleX(-1);
}
/* every reply beneath the comment, beside the reply button - the gray of the counts
   beside the post's comments and tags buttons */
.cmt-replies-n {
	min-width: 12px;
	text-align: right;
	font-size: 12px;
	color: #8a8a8a;
}
.cmt-score {
	min-width: 26px;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	color: #8a8a8a;
}
.cmt-report {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 6px;
	padding: 8px;
	border: 1px dashed #5a5a5a;
	border-radius: 4px;
}
.cmt-report-buttons {
	display: flex;
	justify-content: flex-end;
	gap: 6px;
}
/* THE REPLIES, one level in - 7 + 1 + 2 = 10px a level.  The line runs down from the
   middle of the box above, and each reply hangs off it by a tick at the middle of its
   name line: 2px to its own box, or most of the way to its text when it has no box, so
   it reads as the sketch's L */
.cmt-kids {
	margin-left: 7px;
	padding-left: 2px;
	border-left: 1px solid #5a5a5a;
}
.cmt-kids .cmt-gutter::before {
	content: '';
	position: absolute;
	top: 11px;
	left: -2px;
	width: 2px;
	border-top: 1px solid #5a5a5a;
}
.cmt-kids .cmt-gutter-leaf::before {
	width: 15px;
}
/* the composer, under the list */
.content-comments-footer {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.content-comments-replying {
	font-size: 12px;
}
.content-comments-replying .glyphicon {
	margin-left: 6px;
}
.content-comments-error {
	font-size: 12px;
	color: #e0261b;
}
.content-comments-compose {
	display: flex;
	align-items: stretch;
	gap: 8px;
}
/* 16px: anything smaller and iOS zooms the whole page in when the box is tapped */
.content-comments-compose textarea,
.cmt-report input {
	font-size: 16px;
}
.content-comments-compose textarea {
	flex: 1 1 auto;
	min-width: 0px;
	resize: vertical;
}
/* Post, as an icon: the paper plane, square-ish, in the lower right */
.content-comments-send {
	flex: 0 0 auto;
	min-width: 48px;
	padding: 0px 12px;
	font-size: 18px;
}
@media (max-width: 767px) {
	/* the shell stacks a footer's buttons full width on a phone; Post sits beside the box */
	.moderation-modal-footer.content-comments-footer .btn {
		display: inline-block;
		width: auto;
		margin: 0px;
	}
}
/* /content feed */

/* users */
.users-page-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 15px;
}
.users-page-tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}
.users-sort-select {
	height: 30px;
	min-width: 110px;
	border-radius: 3px;
}
/* the search box, with its clear X inside the right edge */
.users-search {
	position: relative;
	display: inline-block;
}
.users-search-input {
	height: 30px;
	width: 220px;
	max-width: 60vw;
	padding: 0px 26px 0px 8px;
	border-radius: 3px;
}
.users-search-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #888;
}
.users-sort-direction {
	height: 30px;
	padding: 0px 9px;
}
.users-type-select {
	height: 28px;
	min-width: 110px;
	border-radius: 3px;
}
.users-table-panel {
	background-image: url(/images/dark-texture.png);
	border: 2px dashed black;
	border-radius: 4px;
	overflow: hidden;
}
.users-table-scroll {
	overflow-x: auto;
}
.users-table th {
	padding: 8px 10px;
	color: #d6e5ff;
	border-bottom: 1px solid #111;
	white-space: nowrap;
}
.users-table td {
	padding: 7px 10px;
	border-bottom: 1px solid #111;
}
/* striping and hover sit on the TBODY, because there is one tbody per user -- see the
   comment in template/users.php for why the rows are grouped that way */
.users-table tbody:nth-child(even) {
	background-color: rgba(0,0,0,0.25);
}
.users-table tbody:hover, .users-table tbody.is-expanded {
	background-color: rgba(10,122,242,0.12);
}
.users-name-cell {
	width: 100%;
}
.users-expand-icon {
	margin-right: 6px;
	font-size: 10px;
	color: #0a7af2;
}
.users-name {
	color: #d6e5ff;
}
/* the type, read-only beside the name now that the select lives in the pane */
.users-type-hint {
	margin-left: 8px;
	font-size: 11px;
}
.users-detail-row > td {
	padding-top: 0px;
}
.users-detail {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	padding: 2px 4px 8px 22px;
}
.users-detail-field {
	display: flex;
	flex-direction: column;
	min-width: 0px;
}
.users-detail-label {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #525252;
	white-space: nowrap;
}
.users-detail-value {
	font-size: 12px;
	white-space: nowrap;
}
.users-detail-wide .users-detail-value {
	white-space: normal;
	word-break: break-all;
}
/* the verify buttons, a row of their own under the fields */
.users-detail-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex-basis: 100%;
	padding-top: 4px;
}
/* the reason the buttons are off: a line of its own under them, wrapping, because the
   pane's other values are nowrap and this one is a sentence */
.users-detail-note {
	flex-basis: 100%;
	font-size: 11px;
	white-space: normal;
}
/* the verification modal: the /moderate shell (.moderation-modal*), narrow, text left */
.users-verify-modal {
	max-width: 560px;
}
.users-verify-body {
	text-align: left;
}
.users-verify-input {
	height: 30px;
	border-radius: 3px;
	padding: 0px 6px;
	max-width: 200px;
}
/* the revocation reason is a sentence, so the whole width */
.users-verify-reason {
	max-width: none;
}
/* the warning is the point of the box; it is set apart so it cannot be skimmed past
   as if it were help text */
.users-verify-warning {
	margin-top: 14px;
	padding: 10px 12px;
	border: 1px solid #e0261b;
	border-radius: 3px;
	background-color: rgba(224,38,27,0.10);
}
.users-verify-warning p {
	margin: 6px 0px 0px 0px;
}
.users-verify-ack {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0px 0px 0px;
	font-weight: normal;
}
.users-verify-ack input {
	margin: 3px 0px 0px 0px;
	flex: 0 0 auto;
}
.users-verify-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}
/* a banned account keeps its row in the list and wears this - the one place staff
   routinely look, so it is the one place it has to show */
.users-banned-tag {
	margin-left: 8px;
	padding: 0px 6px;
	border: 1px solid #e0261b;
	border-radius: 9px;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #f20f0f;
	white-space: nowrap;
}
@media (max-width: 767px) {
	/* Cancel and Verify side by side, as on the filters modal */
	.moderation-modal-footer.users-verify-footer .btn {
		display: inline-block;
		width: auto;
		margin: 0px;
	}
}
/* /users */

/* settings: the age gate as the account sees it, from the 2026-09-13 sketch - a
   heading with a pill at the right, the date of birth under it, one row per tier */
.access-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
}
.access-heading {
	margin: 0px;
}
.access-tier-row {
	padding: 3px 0px 3px 12px;
}
.access-dob {
	font-size: 16px;
	padding-top: 2px;
}
.access-badge {
	display: inline-block;
	padding: 1px 9px;
	border: 1px solid;
	border-radius: 10px;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.access-badge-green {
	color: #1bde09;
	border-color: #1bde09;
}
.access-badge-red {
	color: #f20f0f;
	border-color: #f20f0f;
}
.access-badge-yellow {
	color: #f2e70f;
	border-color: #f2e70f;
}
/* /settings */

/* a member's name, anywhere it is written: /content's meta line, the /moderate rows and
   its two modals, the /users list, the /settings vouches and the header.  One class, one
   destination - a name that is a link on four pages and plain text on the fifth is a
   name somebody will click on the fifth. */
.user-link {
	cursor: pointer;
	border-bottom: 1px dotted rgba(10,122,242,0.6);
}
.user-link:hover {
	color: #0a7af2;
	border-bottom-color: #0a7af2;
}

/* user page: one member, as another member sees it */
.user-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 15px;
}
.user-identity {
	min-width: 0px;
}
.user-name {
	margin: 0px;
	word-break: break-all;
}
.user-since {
	padding-top: 2px;
}
.user-page-tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 6px;
}
/* the blocked page: one sentence where everything else would have been */
.user-blocked {
	margin-top: 20px;
	padding: 14px 16px;
	border: 1px solid #111;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.25);
}
/* /moderate's display names waiting, above the tabs */
.moderation-names {
	margin: 10px 0;
	padding: 10px 12px;
	border: 1px solid #111;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.25);
}
.moderation-names td { padding-top: 6px; }
/* the vouch panel: only ever drawn for the member this account asked */
.user-vouch {
	margin-top: 20px;
	padding: 14px 16px;
	border: 1px solid #0a7af2;
	border-radius: 3px;
	background-color: rgba(10,122,242,0.08);
}
/* the counts.  they are what THIS viewer can see, which is why there is no total
   anywhere near them to disagree with. */
.user-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 18px;
}
.user-stat {
	min-width: 92px;
	padding: 8px 14px;
	border: 1px solid #111;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.25);
	text-align: center;
}
.user-stat-number {
	font-size: 22px;
	line-height: 1.1;
	color: #d6e5ff;
}
.user-stat-label {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #525252;
}
.user-dates {
	padding-top: 6px;
	font-size: 11px;
}
.user-section-heading {
	padding-top: 18px;
	padding-bottom: 6px;
	font-weight: bold;
}
.user-tags {
	line-height: 2;
}
.user-posts-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.user-posts-header .user-section-heading {
	padding-bottom: 0px;
}
/* the grid.  fixed squares rather than a masonry: the point of it is to find one post
   and open it, and a picture that keeps its own shape here makes that harder, not
   easier.  auto-fill, so the row count follows the width down to a phone. */
.user-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 6px;
	padding-top: 10px;
}
.user-grid-cell {
	position: relative;
	padding-top: 100%;
	border: 1px solid #111;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.25);
	overflow: hidden;
}
.user-grid-cell:hover {
	border-color: #0a7af2;
}
.user-grid-thumb {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* a post with no file is a card of its own words rather than an empty square */
.user-grid-text {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	padding: 6px;
	font-size: 11px;
	overflow: hidden;
	color: #d6e5ff;
}
.user-grid-play {
	position: absolute;
	right: 4px;
	bottom: 3px;
	color: white;
	text-shadow: 0px 0px 4px black;
}
.user-grid-more {
	display: flex;
	align-items: center;
	padding-top: 10px;
}
/* THE TABS ARE /moderate's (.moderation-tabs / .moderation-tab), unchanged - this only
   gives them a line to sit on, because here they divide the page rather than sitting
   under a heading that already has one. */
.user-tabs {
	margin-top: 16px;
	border-bottom: 1px solid #111;
}
/* the Following and Followers lists.  A row rather than a grid cell: there is nothing to
   look at, only a name to read and, on your own list, a button to press. */
.user-follow-list {
	padding-top: 10px;
}
.user-follow-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 7px 10px;
	margin-bottom: 4px;
	border: 1px solid #111;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.25);
}
.user-follow-name {
	font-weight: bold;
}
/* the date takes the slack, so the Unfollow button is against the right edge of every
   row whatever the name beside it is */
.user-follow-since {
	flex: 1 1 auto;
	font-size: 11px;
}
.user-follow-btn {
	flex: 0 0 auto;
}
.user-ban-reason {
	padding-top: 6px;
}
.users-verify-body ul {
	padding-left: 18px;
}
.users-verify-body li {
	padding: 2px 0px;
}
@media (max-width: 767px) {
	.user-page-tools {
		width: 100%;
		justify-content: flex-start;
	}
	.user-grid {
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
	}
}
/* /user page */

/* home page */
/* the window between the header (50px) and the footer (40px), tiled.  Under the
   header's menu (z-index 10) and the footer.  The grid, the tiles and their places in
   it are psyHomeTiles' (protected_js/home.js), and so are the cell size, the gap and the
   padding - one number, iGap, which the square is worked out from - so every tile is
   square and the columns meet both edges.  The black behind is the buffer. */
.home-tiles {
	position: fixed;
	top: 50px;
	right: 0px;
	bottom: 40px;
	left: 0px;
	z-index: 5;
	overflow: hidden;
	background-color: #000;
}
.home-tiles-grid {
	display: grid;
	width: 100%;
}
.home-tile {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background-color: #0d0d0d;
}
/* two faces per tile: the next post loads into the hidden one and fades in over the
   one on show */
.home-tile-face {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	opacity: 0;
	transition: opacity 1.5s ease;
}
.home-tile-face.is-on {
	opacity: 1;
}
.home-tile-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.home-tile:hover .home-tile-face.is-on .home-tile-img {
	filter: brightness(1.15);
}
/* a post with no file is its words */
.home-tile-text {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 8px;
	overflow: hidden;
	text-align: center;
	word-break: break-word;
	font-size: 13px;
	color: #c8c8c8;
}
.home-tile-play {
	position: absolute;
	right: 6px;
	bottom: 6px;
	font-size: 14px;
	color: #fff;
	opacity: 0.85;
	text-shadow: 0px 0px 4px #000;
}
.home-tiles-notice {
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0px;
	transform: translateY(-50%);
	text-align: center;
	color: #8a8a8a;
}
/* /home page */

/* the old site's work - the per-section rows in the modal base-app.php puts up after an
   account from the original psyjoniz.com signs in, and the same rows on /settings.
   memory/LEGACY_SITE.md */
.legacy-offer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 10px 0px;
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
.legacy-offer-choice {
	text-align: right;
}