/* inephi layout. Structure and spacing only.
   Colors, fonts and sizes come from the theme file through the variables below.
   The offline archive gets this file and the chosen theme merged into one css/theme.css. */

body {
	font-family: var(--font-body);
	font-size: var(--font-size);
	line-height: var(--leading);
	max-width: var(--measure);
	margin: 40px auto;
	padding: 0 10px;
	color: var(--text);
	background-color: var(--bg);
}
h1, h2, h3 { color: var(--heading); font-family: var(--font-heading); line-height: 1.2; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.mr-15 { margin-right: 15px; }
.flush-top { margin-top: 0; }
.clear { clear: both; }
.divider { border: 0; border-top: 1px solid var(--rule); margin: 30px 0; }

/* ---- header, notices ---- */
.site-header { margin-bottom: 30px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.brand, .brand:hover { color: var(--heading); text-decoration: none; }
:root { --logo-h: 48px; }
.brand-logo, .brand-logo:hover { text-decoration: none; }
.logo { height: var(--logo-h); width: auto; vertical-align: middle; }
.logo-dark { display: var(--logo-dark-display, inline-block); }
.logo-light { display: var(--logo-light-display, none); }
.tagline { vertical-align: middle; }
.site-nav { float: right; font-size: 15px; line-height: var(--logo-h); }
.site-nav a { color: var(--text); }
.site-nav a + a { margin-left: 15px; }
.header-note { font-size: 14px; color: var(--muted); }
.notice { background: var(--notice-bg); padding: 10px; margin-bottom: 20px; border: 1px solid var(--notice-border); border-radius: var(--radius); }

/* ---- timeline entries (live site and archive) ---- */
.post { margin-bottom: 50px; border-bottom: 1px solid var(--rule); padding-bottom: 30px; }
.post-title { margin-bottom: 5px; }
.post-summary { font-style: italic; color: var(--muted-2); margin: 0 0 10px 0; }
.post-meta { color: var(--muted); display: block; margin-bottom: 15px; }
.post-media { margin-bottom: 20px; }
.post-image { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-body { white-space: pre-wrap; font-size: 17px; color: var(--text); }
.audio-box { margin-bottom: 20px; background: var(--surface-2); padding: 10px; border-radius: var(--radius); }
.audio-label { display: block; font-size: 13px; color: var(--muted-2); margin-bottom: 5px; font-weight: bold; }
.audio-player { width: 100%; }
.audio-files { display: block; margin-top: 5px; color: var(--muted-2); }
.thumb { max-width: 200px; height: auto; border-radius: var(--radius); display: block; margin-bottom: 5px; }

/* ---- forms ---- */
.panel { background: var(--surface); padding: 20px; border-radius: var(--radius); }
.field { margin-bottom: 15px; }
.field-20 { margin-bottom: 20px; }
.field-10 { margin-bottom: 10px; }
.label { display: block; margin-bottom: 5px; }
.label-bold { display: block; margin-bottom: 5px; font-weight: bold; }
.label-bold-8 { display: block; margin-bottom: 8px; font-weight: bold; }
.input { box-sizing: border-box; width: 100%; padding: 8px; border: 1px solid var(--field-border); border-radius: var(--radius); font-family: var(--font-input, revert); }
.input-lg { font-size: 16px; }
.input-italic { font-style: italic; }
.textarea { font-family: inherit; font-size: 16px; resize: vertical; }
.file-input { font-size: 16px; }
.small-label { font-size: 14px; }
.small-select { font-size: 14px; margin-right: 10px; }

/* ---- buttons and button-like links ---- */
.btn { background: var(--btn-bg); color: var(--btn-text); padding: 10px 20px; border: none; border-radius: var(--radius); cursor: pointer; font-family: var(--font-input, revert); }
.btn-lg { font-size: 16px; }
.btn-sm { padding: 6px 14px; font-size: 14px; margin-top: 6px; }
.btn-rec { padding: 8px 15px; font-size: 14px; margin-right: 10px; }
.btn-ok { background: var(--accent); color: var(--on-accent); }
.btn-danger { background: var(--danger); color: var(--on-accent); }
.link-btn, .link-btn:hover { text-decoration: none; border-radius: var(--radius); }
.link-btn-solid { background: var(--btn-bg); color: var(--btn-text); padding: 10px 20px; margin-right: 10px; }
.link-btn-danger { color: var(--danger-soft); border: 1px solid var(--danger-soft); padding: 9px 19px; }
.link-btn-outline { color: var(--heading); border: 1px solid var(--heading); padding: 9px 19px; }
.link-edit, .link-edit:hover { color: var(--link); text-decoration: none; }
.link-delete, .link-delete:hover { color: var(--danger); text-decoration: none; }
.link-cancel, .link-cancel:hover { margin-left: 15px; color: var(--muted); text-decoration: none; }

/* ---- timeline tools ---- */
.tool-box { background: var(--surface); padding: 12px 15px; border-radius: var(--radius); margin-bottom: 20px; }
.tool-title { color: var(--accent); }

/* ---- voice recording box ---- */
.dictation-box { margin-bottom: 20px; background: var(--card); padding: 15px; border: 1px solid var(--card-border); border-radius: var(--radius); }
.rec-status { font-size: 14px; color: var(--muted); }
.rec-status.is-recording { color: var(--danger); }
.viz { margin-bottom: 10px; }
.viz-canvas { width: 100%; background: var(--viz-bg); border-radius: var(--radius); display: block; }
.preview { margin-top: 10px; }
.divider-tight { border: 0; border-top: 1px solid var(--rule); margin-bottom: 30px; }

/* ---- profile card and account page ---- */
.profile { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 25px; }
.profile-side { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.profile-text { min-width: 0; }
.profile-name { font-size: 1.15em; color: var(--heading); }
.profile-about { white-space: pre-wrap; margin-top: 4px; }
.profile-link { font-size: 14px; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; background: var(--surface-2); }
.avatar-lg { width: 120px; height: 120px; }
.avatar-empty { display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--muted); }
.section { margin-bottom: 25px; }
.section h3 { margin-top: 0; }
.check { display: block; margin-bottom: 8px; }
.hint { font-size: 14px; color: var(--muted); }

/* ---- entry layouts: expand-in-place and separate pages ---- */
.post-expand > summary { cursor: pointer; padding: 2px 0; }
.post-expand > summary:hover .post-title-inline { text-decoration: underline; }
.post-expand[open] > summary { margin-bottom: 12px; }
.post-title-inline { font-size: 1.5em; font-weight: bold; color: var(--heading); font-family: var(--font-heading); line-height: 1.3; }
.post-summary-inline { display: block; margin: 4px 0 0 0; }
.title-link, .title-link:hover { color: var(--heading); }
.read-more { font-size: 15px; }
.link-back { font-size: 15px; }

/* ---- captions, scheduling badge, formatted text ---- */
.caption { font-size: 13px; color: var(--muted); margin: 4px 0 0 0; line-height: 1.4; }
.audio-box .caption { margin-top: 8px; }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border: 1px solid var(--notice-border); background: var(--notice-bg); color: var(--text); border-radius: 999px; margin-left: 6px; }
.post-body-rich { white-space: normal; }
.post-body-rich p { margin: 0 0 1em 0; }
.post-body-rich h2 { font-size: 1.4em; margin: 1.2em 0 0.4em 0; }
.post-body-rich h3 { font-size: 1.15em; margin: 1.1em 0 0.3em 0; }
.post-body-rich blockquote { margin: 1em 0; padding: 0.2em 0 0.2em 1em; border-left: 3px solid var(--rule); color: var(--muted-2); }
.post-body-rich ul, .post-body-rich ol { margin: 0 0 1em 0; padding-left: 1.6em; }

/* ---- editor ---- */
.editor-toolbar { display: none; flex-wrap: wrap; gap: 4px; padding: 6px; border: 1px solid var(--field-border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); }
.editor-toolbar button { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); font: 600 15px/1 inherit; font-family: var(--font-input, system-ui, sans-serif); cursor: pointer; }
.editor-toolbar button:hover { border-color: var(--field-border); background: var(--card); }
.editor-toolbar button.on { background: var(--btn-bg); color: var(--btn-text); }
.editor-toolbar .sep { width: 1px; background: var(--field-border); margin: 2px 4px; }
.editor-surface { display: none; min-height: 220px; max-height: 70vh; overflow: auto; background: var(--card); color: var(--text); font-size: 17px; line-height: 1.6; border-radius: 0 0 var(--radius) var(--radius); }
.editor-surface:focus { outline: 2px solid var(--link); outline-offset: -1px; }
.editor-surface p { margin: 0 0 1em 0; }
.editor-surface h2 { font-size: 1.4em; margin: 0.6em 0 0.3em 0; }
.editor-surface h3 { font-size: 1.15em; margin: 0.6em 0 0.3em 0; }
.editor-surface blockquote { margin: 0.6em 0; padding-left: 1em; border-left: 3px solid var(--rule); }
.editor-surface ul, .editor-surface ol { margin: 0 0 1em 0; padding-left: 1.6em; }
.editor.js .editor-toolbar { display: flex; }
.editor.js .editor-surface { display: block; }
.editor.js textarea { display: none; }
.upload-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--field-border); }

/* ---- account menu ---- */
.site-nav details.menu { display: inline-block; position: relative; margin-left: 15px; line-height: inherit; }
.site-nav details.menu summary { cursor: pointer; list-style: none; color: var(--text); }
.site-nav details.menu summary::-webkit-details-marker { display: none; }
.site-nav details.menu summary::after { content: " \25BE"; font-size: 0.85em; }
.menu-list { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 150px; line-height: 1.4; background: var(--card, #fff); border: 1px solid var(--card-border, #ccc); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,.18); padding: 4px 0; }
.site-nav .menu-list a { display: block; margin: 0; padding: 8px 14px; white-space: nowrap; }
.site-nav .menu-list a:hover { background: var(--notice-bg, #eee); text-decoration: none; }

/* ---- blog search ---- */
.blog-search { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin: 0 0 18px; }
.search-field { position: relative; width: 260px; max-width: 100%; }
.search-field .input { width: 100%; padding-right: 40px; -webkit-appearance: none; appearance: none; }
.search-field .input::-webkit-search-cancel-button, .search-field .input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-go { position: absolute; top: 0; right: 0; bottom: 0; width: 38px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0 var(--radius) var(--radius) 0; }
.search-go:hover, .search-go:focus-visible { color: var(--link); }
.search-clear { font-size: 14px; }
@media (max-width: 600px) { .search-field { flex: 1; width: auto; } }

/* ---- profile and search: above the entries, or in the page margin ----
   On a wide screen a sidebar sits outside the centre column in the empty margin, so the entries never get narrower.
   On anything narrower it sits above the entries instead. */
.blog-wrap { position: relative; }
.blog-wrap.side-top .blog-side { margin-bottom: 8px; }
.blog-side .blog-search { margin-top: 0; }
@media (min-width: 1240px) {
	.blog-wrap.side-left > .blog-side, .blog-wrap.side-right > .blog-side { position: absolute; top: 0; width: 220px; }
	.blog-wrap.side-left > .blog-side { right: 100%; margin-right: 34px; }
	.blog-wrap.side-right > .blog-side { left: 100%; margin-left: 34px; }
	.side-left .blog-search, .side-right .blog-search { justify-content: flex-start; }
	.side-left .search-field, .side-right .search-field { flex: 1; width: auto; }
	.side-left .profile, .side-right .profile { flex-direction: column; align-items: flex-start; }
	.side-left .profile-side, .side-right .profile-side { align-items: flex-start; }
	.side-left .blog-main > .divider-tight:first-child, .side-right .blog-main > .divider-tight:first-child { display: none; }
}

/* ---- small screens (phones) ---- */
@media (max-width: 600px) {
	body { margin: 16px auto; }
	input, select, textarea, .input { font-size: 16px; }
	.btn, .btn-sm { min-height: 44px; }
	.site-nav { float: none; clear: both; line-height: 1.4; padding-top: 6px; }
	.site-nav > a, .site-nav details.menu > summary { display: inline-block; padding: 8px 0; }
	.site-nav details.menu { margin-left: 15px; }
	.site-nav .menu-list a { padding: 12px 16px; }
	.editor-toolbar button { min-width: 40px; min-height: 40px; }
	.panel { padding: 14px; }
	h2.post-title { font-size: 1.4em; }
}
input[type="file"] { max-width: 100%; }
@media (max-width: 600px) {
	.profile { flex-wrap: wrap; }
	.profile-text { flex: 1 1 100%; }
}