/*
 * Tablet layout — every post and page by default, plus the 404.
 *
 * The tablet panel itself (.tablet, .tablet-title) and the search
 * form are shared with the feed pages, so they live in style.css.
 *
 * THIS FILE CONTAINS NO IMAGE OR CAPTION RULES, with the single
 * exception of the featured image below, which is part of the page
 * furniture rather than content.
 *
 * Content images and captions are handled in style.css, once, for
 * the whole site. If you find yourself adding a caption rule here,
 * that is the bug returning — put it in style.css instead.
 */

.stage {
	padding: var(--gap);
	padding-top: max(var(--gap), env(safe-area-inset-top));
	padding-bottom: calc(var(--gap) * 4);
}

/* --measure (style.css) governs the sheet, standalone tablets and
   comments. The tablet's own padding sets the text column — nothing
   inside caps it again, or the two disagree and leave dead space. */

.sheet {
	max-width: var(--measure);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

/* ---------------------------------------------------------------
   Featured image
   The one place width:100% is correct — a hero is meant to fill
   its frame. It is never a captioned figure, so the caption rules
   in style.css do not reach it.
   --------------------------------------------------------------- */

.sheet-hero {
	margin: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: #0d0d0d;
}

.sheet-hero img { width: 100%; }

/* ---------------------------------------------------------------
   The tablet
   --------------------------------------------------------------- */

.tablet-solo {
	max-width: var(--measure);
	margin: 0 auto;
}

.tablet-head {
	margin-bottom: 1.5rem;
}

.tablet-meta {
	margin-top: 0.75rem;
	font-family: var(--mono);
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

/* ---------------------------------------------------------------
   Body copy
   --------------------------------------------------------------- */

.tablet-body {
	--body-size: 15px;

	font-size: var(--body-size);
	line-height: 1.7;
}

/* Content pasted from Word, Docs or a browser arrives carrying
   inline style="font-size:…" on individual elements, and an inline
   style beats any stylesheet rule. !important is the only thing
   that outranks it. Headings set their own sizes below.

   figcaption is deliberately absent from this list — the caption
   sets its own size in style.css and must not be overridden here. */
.tablet-body p,
.tablet-body li,
.tablet-body span,
.tablet-body div,
.tablet-body td,
.tablet-body th,
.tablet-body blockquote,
.tablet-body strong,
.tablet-body em {
	font-size: var(--body-size) !important;
}

.tablet-body > * + * { margin-top: 1.2em; }

.tablet-body h2 {
	margin-top: 2.25em;
	font-size: 1.1875rem;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.tablet-body h3 {
	margin-top: 1.75em;
	font-size: 1.0625rem;
	font-weight: 600;
}

.tablet-body ul,
.tablet-body ol { padding-left: 1.25rem; }

.tablet-body li + li { margin-top: 0.4em; }

.tablet-body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.tablet-body blockquote {
	padding-left: 1rem;
	border-left: 2px solid var(--rule);
	color: var(--ink-soft);
}

.tablet-body hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--rule);
}

.tablet-body code {
	font-family: var(--mono);
	font-size: 0.9em;
	background: #f2f2ef;
	padding: 0.1em 0.35em;
	border-radius: 4px;
}

.tablet-body pre {
	overflow-x: auto;
	padding: 1rem;
	background: #f2f2ef;
	border-radius: var(--radius-sm);
}

.tablet-body pre code { background: none; padding: 0; }

.tablet-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.tablet-body th,
.tablet-body td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--rule);
	text-align: left;
}

/* An uncaptioned figure gets no frame from style.css, but the
   reset sets figure margin to 0, so it would sit flush against the
   paragraph above. Spacing only — no appearance. */
.tablet-body figure:not(:has(figcaption)) {
	margin: 2em 0;
}

/* ---------------------------------------------------------------
   Comments
   --------------------------------------------------------------- */

.comments {
	max-width: var(--measure);
	margin: var(--gap) auto 0;
	background: var(--tablet);
	color: var(--ink);
	border-radius: var(--radius);
	padding: 1.5rem;
}

.comments-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}

.comment-list li { margin-bottom: 1.5rem; }

.no-comments { color: var(--ink-soft); }

.comments input[type="text"],
.comments input[type="email"],
.comments input[type="url"],
.comments textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: #fafaf8;
}

.comments .submit {
	padding: 0.7rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--black);
	color: #fff;
	cursor: pointer;
}