/* ── Google Fonts loaded in base.html ── */
/* ── Text / legal pages ── */
.text-page { max-width: 640px; }
.text-page h1 { font: 700 26px/1.2 'Playfair Display', Georgia, serif; margin-bottom: 6px; }
.text-page h2 { font: 700 15px/1.4 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .05em; color: #6b5430; margin: 24px 0 8px; }
.text-page h3 { font: 700 13px/1.4 'Courier Prime','Courier New',monospace; color: #8a7050; margin: 16px 0 4px; }
.text-page p, .text-page li { font: 14px/1.7 Georgia,'Times New Roman',serif; color: #2d2316; margin-bottom: 8px; }
.text-page ul, .text-page ol { padding-left: 20px; margin-bottom: 8px; }
.text-page li { margin-bottom: 4px; }
.text-page hr { border: none; border-top: 1px solid #c4a96b; margin: 24px 0; }
.text-page section { margin-bottom: 8px; }
.text-page a { color: #3a6b1a; }
.text-page code { font: 13px 'Courier Prime','Courier New',monospace; background: #f0ead8; padding: 1px 4px; border-radius: 2px; }
.text-page-updated { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; margin-bottom: 20px; }
.text-page-summary { background: #f5eedc; border: 1px solid #c4a96b; border-radius: 3px; padding: 14px 18px; margin-bottom: 4px; }
.text-page-summary h2 { margin-top: 0; }
.deletion-table { width: 100%; border-collapse: collapse; font: 13px/1.5 Georgia,'Times New Roman',serif; margin-top: 8px; }
.deletion-table th { font: 700 11px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .04em; color: #6b5430; border-bottom: 2px solid #c4a96b; padding: 6px 8px; text-align: left; }
.deletion-table td { padding: 6px 8px; border-bottom: 1px solid #e0d5b8; vertical-align: top; }
.deletion-table tr:last-child td { border-bottom: none; }
/* ── Poem index (Phase 1.8 stub at /browse) ── */
.poem-index { list-style: none; padding: 0; margin: 12px 0 0; }
.poem-index-item {
padding: 10px 0;
border-bottom: 1px solid #e0d5b8;
font: 14px/1.5 Georgia,'Times New Roman',serif;
}
.poem-index-item:last-child { border-bottom: none; }
.poem-index-title { font-weight: 700; color: #3a6b1a; text-decoration: none; }
.poem-index-title:hover { text-decoration: underline; }
.poem-index-meta { font: 12px 'Courier Prime','Courier New',monospace; color: #8a7050; }
/* ── Site footer ── */
.site-footer-bar {
width: 100%;
background: #f0ead8;
border-top: 1px solid #c4a96b;
}
.site-footer {
max-width: 820px;
margin: 0 auto;
padding: 20px 16px 24px;
font: 12px 'Courier Prime','Courier New',monospace;
color: #a08060;
}
.site-footer a { color: #8a7050; text-decoration: none; }
.site-footer a:hover { color: #5a3a10; text-decoration: underline; }
/* Weatherhead citation */
.weatherhead { margin: 0 0 18px; padding: 0; border: none; }
.weatherhead blockquote {
margin: 0 0 6px;
padding: 0 0 0 14px;
border-left: 3px solid #c4a96b;
}
.weatherhead blockquote p {
font: italic 14px/1.6 Georgia,'Times New Roman',serif;
color: #5a4a30;
margin: 0;
}
.weatherhead figcaption {
padding-left: 17px;
font: 11px 'Courier Prime','Courier New',monospace;
color: #a08060;
}
/* Footer lower row */
.footer-lower {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.footer-kofi { display: flex; align-items: center; gap: 4px; }
.footer-legal { display: flex; gap: 6px; align-items: center; }
@media (max-width: 480px) {
.footer-lower { flex-direction: column; align-items: flex-start; }
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ── Base ── */
body {
font: 14px/1.6 Georgia, 'Times New Roman', serif;
background-color: #4d7432;
background-image: url('/static/grass.svg');
background-size: 40px 40px;
color: #2d2316;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
max-width: 820px;
margin: 0 auto;
padding: 20px 16px 40px;
flex: 1;
}
/* ── Fence divider ── */
.fence {
width: 100%;
height: 28px;
position: relative;
background: repeating-linear-gradient(
90deg,
#6b4820 0px, #6b4820 10px,
transparent 10px, transparent 58px
);
background-position: center;
}
.fence::before,
.fence::after {
content: '';
position: absolute;
left: 0; right: 0;
height: 5px;
background: #6b4820;
border-radius: 2px;
}
.fence::before { top: 5px; }
.fence::after { top: 17px; }
/* ── Box (pinned paper card) ── */
.box {
background: #faf5e9;
border-radius: 2px;
padding: 24px 20px;
margin-bottom: 20px;
box-shadow: 2px 3px 10px rgba(0,0,0,.14), 0 0 0 1px rgba(139,105,20,.12);
position: relative;
margin-top: 18px;
}
.box::before {
content: '📌';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
line-height: 1;
}
/* ── Headings ── */
h1 {
font: 700 1.45rem/1.2 'Playfair Display', Georgia, serif;
color: #2d2316;
margin-bottom: 14px;
}
h2 {
font: 700 1.1rem/1.2 Georgia, serif;
color: #2d2316;
margin-bottom: 12px;
}
/* ── Site nav ── */
.site-nav-bar {
width: 100%;
background: #f0ead8;
border-bottom: 1px solid #c4a96b;
}
.site-nav {
max-width: 820px;
margin: 0 auto;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 4px;
}
.nav-brand {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-right: 12px;
}
.nav-logo {
font: normal 15px 'Abril Fatface', Georgia, serif;
color: #2d2316;
text-decoration: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 0;
}
.nav-logo-svg { height: 34px; width: auto; display: block; }
.nav-logo-text { display: none; }
.nav-logo:hover { color: #3a6b1a; }
.nav-body {
display: flex;
align-items: center;
flex: 1;
gap: 2px;
}
.nav-left { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-right { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }
.nav-item {
font: 12px 'Courier Prime','Courier New',monospace;
color: #5a7a2a;
text-decoration: none;
padding: 5px 7px;
border-radius: 2px;
white-space: nowrap;
background: none;
border: none;
cursor: pointer;
line-height: 1.4;
display: inline-flex;
align-items: center;
gap: 3px;
}
.nav-item:hover, .nav-item:focus-visible { color: #2d4a10; background: #f0ead8; outline: none; }
.nav-caret { font-size: 8px; opacity: .7; }
.nav-username { font-weight: 700; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.nav-signin {
font: 700 11px 'Courier Prime','Courier New',monospace;
color: #5a7a2a;
text-decoration: none;
border: 1px solid #c4a96b;
border-radius: 2px;
padding: 4px 11px;
white-space: nowrap;
background: transparent;
}
.nav-signin:hover { background: #f0ead8; color: #2d4a10; }
/* Dropdown groups */
.nav-group { position: relative; }
.nav-sub {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 300;
background: #faf5e9;
border: 1px solid #c4a96b;
border-radius: 2px;
box-shadow: 2px 4px 10px rgba(0,0,0,.13);
min-width: 170px;
padding: 4px 0;
}
.nav-sub-right { left: auto; right: 0; }
.nav-group.open .nav-sub { display: block; }
.nav-group.open > .nav-item-btn { background: #f0ead8; color: #2d4a10; }
.nav-sub-item {
display: block;
padding: 6px 14px;
font: 12px 'Courier Prime','Courier New',monospace;
color: #5a7a2a;
text-decoration: none;
white-space: nowrap;
}
.nav-sub-item:hover, .nav-sub-item:focus-visible { background: #f0ead8; color: #2d4a10; outline: none; }
.nav-sub-sep { border-top: 1px solid #e0d5b8; margin: 4px 0; }
/* ───── Display-mode picker (Phase 1.12) ──────────────────────────────────────
Collapsed control is a native in the nav (works with no JS); the
first-run strip sits under the nav on display surfaces until the visitor
picks or dismisses. Provisional styling — refined in the pre-beta style pass. */
.mode-menu { position: relative; }
.mode-menu-summary {
font: 12px 'Courier Prime','Courier New',monospace;
color: #5a7a2a; cursor: pointer; padding: 5px 7px; border-radius: 2px;
white-space: nowrap; list-style: none; user-select: none;
}
.mode-menu-summary::-webkit-details-marker { display: none; }
.mode-menu-summary::marker { content: ''; }
.mode-menu-summary:hover,
.mode-menu[open] .mode-menu-summary { background: #f0ead8; color: #2d4a10; }
.mode-menu-form {
position: absolute; top: calc(100% + 4px); right: 0; z-index: 300;
display: flex; flex-direction: column;
background: #faf5e9; border: 1px solid #c4a96b; border-radius: 2px;
box-shadow: 2px 4px 10px rgba(0,0,0,.13); min-width: 130px; padding: 4px 0;
}
.mode-opt {
display: block; width: 100%; text-align: left;
padding: 6px 14px; font: 12px 'Courier Prime','Courier New',monospace;
color: #5a7a2a; background: none; border: none; cursor: pointer; white-space: nowrap;
}
.mode-opt:hover, .mode-opt:focus-visible { background: #f0ead8; color: #2d4a10; outline: none; }
.mode-opt-current { font-weight: 700; color: #2d4a10; }
.mode-opt-current::before { content: '\2713\00A0'; }
/* First-run strip */
.mode-firstrun {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 6px 12px; padding: 8px 14px;
background: #f0ead8; border-bottom: 1px solid #c4a96b;
font: 12px 'Courier Prime','Courier New',monospace; color: #5a4a2a;
}
.mode-firstrun-label { font-weight: 700; }
.mode-firstrun-form { display: inline-flex; align-items: center; gap: 4px; }
.mode-firstrun .mode-opt {
width: auto; border: 1px solid #c4a96b; border-radius: 2px; padding: 4px 11px;
}
.mode-firstrun .mode-opt-current {
background: #5a7a2a; color: #fdf8f0; border-color: #5a7a2a;
}
.mode-firstrun .mode-opt-current::before { content: none; }
.mode-firstrun-save {
font: 700 12px 'Courier Prime','Courier New',monospace;
color: #fdf8f0; background: #5a7a2a; border: 1px solid #5a7a2a; border-radius: 2px;
padding: 4px 12px; cursor: pointer; margin-left: 6px;
}
.mode-firstrun-save:hover { background: #2d4a10; }
.mode-firstrun-dismiss {
background: none; border: none; cursor: pointer;
font-size: 16px; line-height: 1; color: #8a7050; padding: 2px 6px; margin-left: 2px;
}
.mode-firstrun-dismiss:hover { color: #2d2316; }
.mode-firstrun-msg { justify-content: center; font-weight: 400; color: #5a4a2a; }
/* Account-preferences mirror (profile edit) — inline row, not a dropdown */
.mode-prefs-form { display: flex; flex-wrap: wrap; gap: 6px; }
.mode-prefs-form .mode-opt {
width: auto; border: 1px solid #c4a96b; border-radius: 2px; padding: 5px 14px;
}
.mode-prefs-form .mode-opt-current {
background: #5a7a2a; color: #fdf8f0; border-color: #5a7a2a;
}
.mode-prefs-form .mode-opt-current::before { content: none; }
/* Hamburger (hidden on desktop) */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 4px 6px;
margin-left: auto;
}
.nav-hamburger span {
display: block;
width: 18px;
height: 2px;
background: #5a7a2a;
border-radius: 1px;
}
/* Mobile */
@media (max-width: 640px) {
.site-nav { flex-wrap: wrap; gap: 0; }
.nav-brand { width: 100%; justify-content: space-between; margin-right: 0; }
.nav-hamburger { display: flex; }
.nav-body { display: none; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 0 2px; gap: 0; }
.site-nav.nav-open .nav-body { display: flex; }
.nav-left, .nav-right { flex-direction: column; align-items: flex-start; width: 100%; gap: 0; margin-left: 0; }
.nav-right { border-top: 1px solid #e0d5b8; padding-top: 4px; margin-top: 4px; }
.nav-group { width: 100%; }
.nav-sub { position: static; box-shadow: none; border: none; border-radius: 0; background: transparent; padding: 0 0 2px 12px; min-width: 0; }
.nav-group.open .nav-sub { display: flex; flex-direction: column; }
.nav-signin { padding: 5px 7px; border: none; }
.mode-menu { width: 100%; }
.mode-menu-form { position: static; box-shadow: none; border: none; background: transparent; padding: 0 0 2px 12px; min-width: 0; }
/* Hamburger menu — bigger, Abril Fatface */
.site-nav.nav-open .nav-body .nav-item {
font-family: 'Abril Fatface', Georgia, serif;
font-size: 18px;
font-weight: 400;
padding: 7px 10px;
}
}
/* ── Nav links (small, inside box — legacy, used on some inner pages) ── */
.nav-links { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.nav-links a { font: 12px 'Courier Prime','Courier New',monospace; color: #5a7a2a; text-decoration: none; border-bottom: 1px solid #b5d68a; }
.nav-links a:hover { color: #3d5a1a; border-bottom-color: #3d5a1a; }
/* ── Inputs ── */
input[type="text"],
input[type="password"],
textarea {
display: block;
width: 100%;
padding: 8px 11px;
margin: 6px 0 10px;
border: 2px solid #c4a96b;
border-radius: 2px;
background: #fff9ee;
font: 14px Georgia, serif;
color: #2d2316;
outline: none;
transition: border-color .15s;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
border-color: #5a7a2a;
}
textarea {
min-height: 90px;
resize: vertical;
font-family: 'Courier Prime', 'Courier New', monospace;
font-size: 13px;
}
label {
display: block;
font: 700 13px 'Courier Prime', 'Courier New', monospace;
color: #6b5430;
margin-top: 12px;
margin-bottom: 2px;
text-transform: uppercase;
letter-spacing: .05em;
font-size: 11px;
}
label .opt { font-weight: normal; color: #a08060; font-size: 11px; }
/* ── Buttons ── */
button, .btn-link {
display: inline-block;
padding: 8px 18px;
border-radius: 2px;
cursor: pointer;
font: 700 12px 'Courier Prime', 'Courier New', monospace;
letter-spacing: .04em;
text-decoration: none;
margin: 4px 4px 4px 0;
transition: none;
}
.btn-primary,
button[type="submit"] {
background: #5a7a2a;
color: #fff;
border: 2px solid #3d5a1a;
box-shadow: 2px 2px 0 #3d5a1a;
}
.btn-primary:hover,
button[type="submit"]:hover { background: #4a6a1a; }
.btn-primary:active,
button[type="submit"]:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-sec {
background: #f5e9c8;
color: #6b5430;
border: 2px solid #c4a96b;
box-shadow: 2px 2px 0 #c4a96b;
}
.btn-sec:hover { background: #ede0b0; }
.btn-sec:active { transform: translate(2px, 2px); box-shadow: none; }
.btn-sec:disabled, .btn-sec.btn-signin { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.actions { margin-top: 16px; }
/* ── Tabs ── */
.tabs {
display: flex;
gap: 4px;
margin: 14px 0 0;
position: relative;
z-index: 1;
}
.tab-btn {
background: #d9d0be;
color: #6b5430;
padding: 7px 16px;
border: 1px solid #b8a97a;
border-bottom: none;
border-radius: 4px 4px 0 0;
cursor: pointer;
font: 700 11px 'Courier Prime', 'Courier New', monospace;
letter-spacing: .05em;
text-transform: uppercase;
}
.tab-btn.on {
background: #faf5e9;
color: #2d2316;
border-bottom: 1px solid #faf5e9;
}
.tab {
display: none;
border: 1px solid #b8a97a;
border-radius: 0 4px 4px 4px;
padding: 14px;
background: #faf5e9;
}
.tab.on { display: block; }
/* ── Messages ── */
.msg {
padding: 11px 14px;
margin: 10px 0;
border-radius: 2px;
border-left: 4px solid;
font: 13px 'Courier Prime', 'Courier New', monospace;
}
.msg.err { background: #fff0ef; color: #7a2020; border-color: #c46050; }
.msg.ok { background: #eaf5e0; color: #3a5a1a; border-color: #6dbf4a; }
.msg.warn { background: #fdf5e0; color: #7a5520; border-color: #c4a030; }
/* ── Stats bar ── */
.stats-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px 14px;
background: #f0ead8;
border: 1px solid #c4a96b;
border-radius: 2px;
margin-bottom: 14px;
font: 12px 'Courier Prime', 'Courier New', monospace;
}
.stat { color: #2d2316; }
.stat.dim { color: #8a7050; }
.stat.warn { color: #8a3a10; }
/* ── Content preview ── */
.content-preview {
background: #fff9ee;
border: 1px solid #d9c88f;
border-radius: 2px;
padding: 14px;
margin: 8px 0 10px;
line-height: 1.8;
overflow-wrap: break-word;
}
.content-preview p { margin-bottom: 8px; }
.content-preview p:last-child { margin-bottom: 0; }
.content-preview a:not(.horse-link) { color: #5a7a2a; }
/* ── Chain username ── */
.chain-username {
font: 700 13px 'Courier Prime', 'Courier New', monospace;
color: #5a7a2a;
margin: 10px 0 4px;
}
.chain-sep {
border: none;
border-top: 1px solid #d9c88f;
margin: 12px 0;
}
/* ── Horse list ── */
.horse-list {
margin: 8px 0 4px 20px;
line-height: 1.9;
}
/* ── Fridge magnet horse links (in result previews) ── */
.horse-link {
display: inline-block;
padding: 4px 8px 4px 8px;
font: 700 0.88em 'Courier Prime', 'Courier New', monospace;
box-shadow: 2px 2px 3px rgba(0,0,0,.22);
border-radius: 6px;
text-decoration: none;
vertical-align: baseline;
margin: 22px 4px 8px 4px;
position: relative;
overflow: visible;
background: var(--bg);
color: var(--fg);
}
.horse-link::before {
content: '♞'; position: absolute; pointer-events: none;
color: var(--bg); font-size: 32px; line-height: 1;
left: 0; top: -20px;
}
.horse-link::after {
content: '∫'; position: absolute; pointer-events: none;
color: var(--bg); font-size: 22px; line-height: 1;
right: -10px; top: 50%;
transform: translateY(-50%) scaleY(-1);
}
.horse-link.rev::before { left: auto; right: 0; transform: scaleX(-1); }
.horse-link.rev::after { right: auto; left: -10px; transform: translateY(-50%) scaleY(-1) scaleX(-1); }
.horse-link .legs {
position: absolute; pointer-events: none;
bottom: -6px; left: 0; right: 0; height: 6px;
background:
linear-gradient(var(--bg),var(--bg)) 4px 0 / 2px 100% no-repeat,
linear-gradient(var(--bg),var(--bg)) 10px 0 / 2px 100% no-repeat,
linear-gradient(var(--bg),var(--bg)) calc(100% - 10px) 0 / 2px 100% no-repeat,
linear-gradient(var(--bg),var(--bg)) calc(100% - 4px) 0 / 2px 100% no-repeat;
}
/* ── Tags ── */
.tag-section {
background: #f0ead8;
border: 1px solid #d9c88f;
border-radius: 2px;
padding: 10px 12px;
margin: 8px 0;
}
.tag-section-head {
font: 700 10px 'Courier Prime', 'Courier New', monospace;
color: #8a7050;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: .06em;
}
.tag-grid {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.tag-item {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px 3px 5px;
background: #fff9ee;
border: 1px solid #c4a96b;
border-radius: 2px;
cursor: pointer;
font: 12px 'Courier Prime', 'Courier New', monospace;
white-space: nowrap;
}
.tag-item input[type="checkbox"] { margin: 0; }
/* ── Famous horse links — gold shimmer ── */
@keyframes famous-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.horse-link.famous-horse {
background-color: var(--bg);
background-image: linear-gradient(105deg,
transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
background-size: 200% 100%;
animation: famous-shimmer 2.5s linear infinite;
box-shadow: 2px 2px 4px rgba(0,0,0,.25), 0 0 0 1.5px rgba(200,160,0,.55);
}
.famous-callout {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px;
}
.famous-badge {
display: inline-block;
background: #fff9ee;
border: 1px solid #c8a000;
border-radius: 2px;
padding: 1px 6px;
font: 12px 'Courier Prime', 'Courier New', monospace;
color: #5a3e00;
margin: 0 2px;
}
/* ── Horse density stat ── */
.density { color: #8a7050; font: 12px 'Courier Prime', 'Courier New', monospace; margin-left: 6px; }
/* ── Login ── */
.login-box {
max-width: 360px;
margin: 60px auto 0;
background: #faf5e9;
border-radius: 2px;
padding: 32px;
box-shadow: 2px 3px 10px rgba(0,0,0,.14);
position: relative;
margin-top: 60px;
}
.login-box::before {
content: '📌';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
line-height: 1;
}
.login-box h1 { margin-bottom: 20px; text-align: center; }
.login-box button { width: 100%; margin-top: 4px; }
/* ── Responsive ── */
@media (max-width: 420px) {
.box { padding: 18px 14px; }
h1 { font-size: 1.25rem; }
}
/* Prevent iOS Safari auto-zoom on input focus (triggers below 16px) */
@media (hover: none) and (pointer: coarse) {
input[type="text"],
input[type="password"],
textarea,
select {
font-size: 16px;
}
}
/* ── Danger button (reject / destructive actions) ── */
.btn-danger {
background: #fff0ef;
color: #7a2020;
border: 2px solid #e8b0a8;
box-shadow: 2px 2px 0 #e8b0a8;
}
.btn-danger:hover { background: #ffe0de; }
.btn-danger:active { transform: translate(2px, 2px); box-shadow: none; }
/* ── Submission cards (submissions.html) ── */
.sub-card {
background: #faf5e9;
border-radius: 2px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 2px 2px 6px rgba(0,0,0,.1), 0 0 0 1px rgba(139,105,20,.1);
}
.sub-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
flex-wrap: wrap;
gap: 8px;
}
.sub-card-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.sub-card-actions { display: flex; gap: 6px; }
.type-badge {
font: 700 10px 'Courier Prime', 'Courier New', monospace;
background: #f0ead8;
border: 1px solid #c4a96b;
border-radius: 2px;
padding: 2px 7px;
text-transform: uppercase;
letter-spacing: .06em;
color: #6b5430;
}
.sub-stat { font: 12px 'Courier Prime', 'Courier New', monospace; color: #8a7050; }
.sub-date { font: 12px 'Courier Prime', 'Courier New', monospace; color: #a08060; }
.sub-author { font: 12px Georgia, serif; color: #6b5430; }
.sub-author a { color: #5a7a2a; }
.sub-preview-toggle {
cursor: pointer;
font: 13px 'Courier Prime', 'Courier New', monospace;
color: #5a7a2a;
user-select: none;
}
.sub-preview-content {
margin-top: 8px;
padding: 12px;
background: #fff9ee;
border: 1px solid #d9c88f;
border-radius: 2px;
max-height: 320px;
overflow-y: auto;
font-size: 14px;
line-height: 1.9;
}
.sub-admin {
background: #f0f5e8;
box-shadow: 2px 2px 6px rgba(0,0,0,.1), 0 0 0 2px #7aaa3a;
}
.sub-fast-track { margin-top: 10px; }
.btn-fast {
font-size: 12px;
padding: 4px 10px;
}
/* ── Poetry editor page ── */
.container.wide { max-width: 1200px; }
.poetry-wrap {
display: grid;
grid-template-columns: 280px 1fr;
gap: 14px;
align-items: start;
}
/* min-width:0 lets the 1fr grid track shrink below its content's intrinsic
width — without it, a nowrap label or wide tile row blows the page out. */
.left-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.right-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.panel {
background: #faf5e9;
border-radius: 2px;
padding: 16px;
box-shadow: 2px 3px 8px rgba(0,0,0,.1), 0 0 0 1px rgba(139,105,20,.1);
}
/* Search */
.search-row { display: flex; gap: 6px; margin-bottom: 6px; }
.search-row input { flex: 1; margin: 0; }
.search-row button { flex-shrink: 0; padding: 8px 14px; }
.search-mode { font: italic 11px 'Courier Prime','Courier New',monospace; color: #5a7a2a; margin-bottom: 4px; min-height: 16px; }
.search-meta { font: 12px 'Courier Prime','Courier New',monospace; color: #8a7050; margin-bottom: 6px; }
.search-meta a { color: #5a7a2a; cursor: pointer; text-decoration: underline; }
.quick-picks { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.qp-btn { font: 11px 'Courier Prime','Courier New',monospace; padding: 3px 9px; background: #f0ead8; color: #6b5430; border: 1px solid #c4a96b; border-radius: 2px; cursor: pointer; }
.qp-btn:hover { background: #eaf5e0; border-color: #8aad60; color: #3a5a1a; }
.qp-btn:disabled { color: #b8a97a; cursor: default; }
.search-help-btn { display: block; width: 100%; margin-top: 8px; padding: 5px 0; border-top: 1px solid #e0d4b0; background: none; border-left: none; border-right: none; border-bottom: none; font: 11px 'Courier Prime','Courier New',monospace; color: #8a7050; cursor: pointer; text-align: left; }
.search-help-btn:hover { color: #5a7a2a; }
.help-modal-body { max-width: 480px; }
.help-steps { font: 13px Georgia,serif; color: #3a2a10; line-height: 1.7; padding-left: 20px; margin: 12px 0; }
.help-steps li { margin-bottom: 10px; }
.help-steps code { background: #f0ead8; padding: 0 3px; border-radius: 2px; font: 11px 'Courier Prime','Courier New',monospace; }
.help-note { font: 11px 'Courier Prime','Courier New',monospace; color: #a08060; border-top: 1px solid #e0d4b0; padding-top: 8px; margin-top: 0; line-height: 1.8; }
.help-note code { background: #f0ead8; padding: 0 3px; border-radius: 2px; }
.search-results { max-height: 240px; overflow-y: auto; }
.search-results .horse-tile { touch-action: auto; }
.search-error { font: 12px 'Courier Prime','Courier New',monospace; color: #7a2020; margin: 4px 0; }
.result-item { display: flex; align-items: center; gap: 8px; padding: 10px 4px 8px; }
.result-chip { flex: 1; min-width: 0; cursor: default; }
.multi-badge { font: 10px 'Courier Prime','Courier New',monospace; color: #8a7050; background: #f0ead8; border-radius: 2px; padding: 1px 4px; flex-shrink: 0; }
.add-btn { background: #eaf5e0; color: #3a5a1a; border: 1px solid #b5d68a; border-radius: 2px; padding: 2px 8px; cursor: pointer; font: 700 11px 'Courier Prime','Courier New',monospace; flex-shrink: 0; white-space: nowrap; }
.add-btn:hover { background: #d4ecb8; }
.add-btn:disabled { background: #f0ead8; color: #b8a97a; border-color: #d9c88f; cursor: default; }
/* Search mode toggle */
.search-mode-toggle { display: flex; gap: 0; margin-bottom: 8px; }
.smt-btn {
flex: 1; padding: 5px 0; border: 1px solid #b8a97a; background: #e8dfc8; color: #6b5430;
font: 700 10px 'Courier Prime','Courier New',monospace; letter-spacing: .04em;
text-transform: uppercase; cursor: pointer; text-align: center;
}
.smt-btn:first-child { border-radius: 3px 0 0 3px; }
.smt-btn:last-child { border-radius: 0 3px 3px 0; border-left: none; }
.smt-btn:not(:first-child):not(:last-child) { border-left: none; }
.smt-btn.on { background: #5a7a2a; color: #f5f0e4; border-color: #3d5a1a; z-index: 1; position: relative; }
.smt-btn.on + .smt-btn { border-left: 1px solid #b8a97a; }
/* Rhyme chip panel */
.rhyme-panel { margin: 6px 0; }
.rhyme-label { font: italic 11px 'Courier Prime','Courier New',monospace; color: #5a7a2a; margin-bottom: 5px; }
.rhyme-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.rhyme-chip {
font: 11px 'Courier Prime','Courier New',monospace; padding: 3px 9px; border-radius: 2px; cursor: pointer;
border: 1px solid #c4a96b; background: #f0ead8; color: #6b5430; user-select: none;
}
.rhyme-chip.on { background: #d4ecb8; border-color: #7ab85a; color: #2a4a0a; font-weight: 700; }
.rhyme-chip:hover { filter: brightness(0.95); }
.find-horses-btn {
width: 100%; padding: 6px 0; background: #5a7a2a; color: #f5f0e4; border: 1px solid #3d5a1a;
border-radius: 2px; font: 700 11px 'Courier Prime','Courier New',monospace;
letter-spacing: .04em; text-transform: uppercase; cursor: pointer; margin-top: 2px;
}
.find-horses-btn:hover { background: #4a6820; }
.find-horses-btn:active { transform: translate(1px,1px); }
.find-horses-btn:disabled { background: #c0c8b0; border-color: #a0a890; cursor: default; }
/* Rhyme result group headers */
.rhyme-group-header { font: 700 10px 'Courier Prime','Courier New',monospace; color: #5a7a2a; letter-spacing: .06em; text-transform: uppercase; padding: 8px 4px 2px; border-top: 1px solid #e0d4b0; margin-top: 2px; }
.rhyme-group-header.first { border-top: none; margin-top: 0; padding-top: 2px; }
.rhyme-group-header.collapsible { padding: 10px 4px; }
.rhyme-group-header .group-count { color: #8a7050; font-weight: 400; margin-left: 4px; }
.group-show-all { font: 11px 'Courier Prime','Courier New',monospace; color: #5a7a2a; cursor: pointer; padding: 6px 4px 8px; text-decoration: underline; }
.group-show-all:hover { color: #3a5a1a; }
.chips-show-more { font: 11px 'Courier Prime','Courier New',monospace; color: #8a7050; border: 1px dashed #c4a96b; border-radius: 2px; padding: 3px 9px; cursor: pointer; }
.chips-show-more:hover { color: #5a7a2a; border-color: #8aad60; }
/* Thesaurus stub */
.thesaurus-stub { font: 12px 'Courier Prime','Courier New',monospace; color: #8a7050; background: #f5f0e4; border: 1px dashed #c4a96b; border-radius: 2px; padding: 12px 10px; margin-top: 6px; line-height: 1.6; }
/* History */
.history-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.htag { font: 11px 'Courier Prime','Courier New',monospace; background: #f0ead8; border: 1px solid #c4a96b; border-radius: 2px; padding: 2px 7px; cursor: pointer; color: #6b5430; }
.htag:hover { background: #eaf5e0; border-color: #8aad60; color: #3a5a1a; }
/* Stable */
.stable-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.stable-head h3 { font: 700 1.05rem 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .06em; color: #6b5430; margin: 0; }
.clear-btn { font: 11px 'Courier Prime','Courier New',monospace; padding: 3px 8px; background: #fff0ef; color: #7a2020; border: 1px solid #e8b0a8; border-radius: 2px; cursor: pointer; }
.stable-tiles { display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 8px; background: #f0ead8; border: 2px dashed #c4a96b; border-radius: 2px; }
.stable-empty { color: #a08060; font: italic 12px Georgia,serif; }
/* Horse tile — utilitarian button style (stable + poem canvas).
Per the UI-vs-display commitment in ROADMAP §5, editor chips keep only
color (and shimmer for famous horses). No head, tail, legs, or tilts —
those live in pasture-mode display surfaces. */
.horse-tile {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
min-height: 44px; min-width: 44px;
padding: 8px 14px;
font: 700 13px 'Courier Prime','Courier New',monospace;
box-shadow: 2px 2px 4px rgba(0,0,0,.25);
border-radius: 6px;
cursor: pointer;
user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
white-space: nowrap; position: relative;
border: 2px solid transparent; overflow: visible;
background: var(--bg); color: var(--fg);
-webkit-tap-highlight-color: transparent;
/* Disable native gestures (scroll, zoom) on chips so finger-drags route to
our pointermove handler instead of getting eaten by page scroll. Tap and
click semantics still fire normally. */
touch-action: none;
}
.horse-tile * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.horse-tile:hover { box-shadow: 2px 2px 6px rgba(0,0,0,.35); }
.horse-tile:focus-visible {
outline: 3px solid #5a7a2a; outline-offset: 2px;
}
.horse-tile.is-dragging { opacity: 0.35; cursor: grabbing; }
/* Drop-side indicator: a green caret-bar on the edge where the dragged chip
will land. Pseudo-element so it doesn't disturb the chip's box shadow. */
.horse-tile.drop-before::before,
.horse-tile.drop-after::before {
content: '';
position: absolute;
top: -3px; bottom: -3px;
width: 4px;
background: #5a7a2a;
border-radius: 2px;
pointer-events: none;
}
.horse-tile.drop-before::before { left: -7px; }
.horse-tile.drop-after::before { right: -7px; }
/* When dragging a chip, the chip itself uses grab cursor on press */
body.dragging .horse-tile { cursor: grabbing; }
/* Touch: prevent scroll-interception during an active drag only */
body.dragging { touch-action: none; }
/* Poem canvas */
.poem-panel { display: flex; flex-direction: column; }
.poem-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.poem-head h2, .poem-head h3 { margin: 0; font: 700 1.05rem 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .06em; color: #6b5430; }
.poem-actions-footer { display: flex; gap: 6px; padding: 10px 0 4px; }
.poem-actions { display: flex; gap: 6px; }
.poem-canvas {
display: flex; flex-direction: column;
min-height: 200px;
background: #fdf8f0;
border: 2px solid #c4a96b;
border-radius: 2px;
margin-bottom: 6px;
}
.poem-line { display: flex; align-items: center; gap: 6px; min-height: 46px; padding: 4px 10px; border-bottom: 1px solid #e8d9b0; }
.poem-line:last-child { border-bottom: none; }
.poem-line.drop-target { background: #eaf5e0; }
.line-num { font: 10px 'Courier Prime','Courier New',monospace; color: #c4a96b; min-width: 16px; flex-shrink: 0; user-select: none; }
.line-tiles { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; min-height: 30px; }
.line-tiles.drop-target { outline: 2px dashed #5a7a2a; border-radius: 2px; }
.add-line { background: none; border: 2px dashed #c4a96b; border-radius: 2px; color: #a08060; padding: 7px; cursor: pointer; font: 12px 'Courier Prime','Courier New',monospace; width: 100%; margin-top: 4px; }
.add-line:hover { border-color: #5a7a2a; color: #5a7a2a; }
.poem-footer { margin-top: 10px; padding-top: 10px; border-top: 1px solid #e0d4b0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.poem-stat { font: 12px 'Courier Prime','Courier New',monospace; color: #8a7050; }
/* Drag ghost */
#drag-ghost { display: none; }
/* Chip menu — opens on tap or Enter/Space on a focused chip.
The canonical "tap a horse → do a thing" surface for the editor;
re-used by 1.7's horse popover on published poems. */
.chip-menu {
position: fixed; z-index: 200;
min-width: 200px;
background: #faf5e9;
border: 2px solid #c4a96b;
border-radius: 2px;
box-shadow: 2px 3px 12px rgba(0,0,0,.25);
padding: 4px;
font: 13px 'Courier Prime','Courier New',monospace;
}
.chip-menu[hidden] { display: none; }
.chip-menu-head {
font: 700 11px 'Courier Prime','Courier New',monospace;
color: #6b5430; text-transform: uppercase; letter-spacing: .06em;
padding: 6px 10px 4px; border-bottom: 1px solid #e0d4b0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 280px;
}
.chip-menu-item {
display: block; width: 100%; text-align: left;
background: none; border: none; box-shadow: none;
padding: 10px 12px; min-height: 44px;
color: #2d2316; cursor: pointer;
font: inherit; border-radius: 2px;
}
.chip-menu-item:hover,
.chip-menu-item:focus { background: #f0ead8; outline: none; }
.chip-menu-item.danger { color: #7a2020; }
.chip-menu-item[disabled] { color: #a08060; cursor: not-allowed; }
.chip-menu-item .hint { display: block; font-size: 11px; color: #8a7050; margin-top: 2px; }
.chip-menu-backdrop {
position: fixed; inset: 0; z-index: 199; background: transparent;
}
.chip-menu-backdrop[hidden] { display: none; }
/* Ephemeral drop zones — visible only while a drag is in progress.
Three actions: send to last line, send to pasture, remove. */
.drop-zones {
position: fixed; left: 50%; bottom: 20px;
transform: translateX(-50%) translateY(120%);
display: flex; gap: 10px;
background: rgba(250, 245, 233, 0.96);
border: 2px solid #c4a96b; border-radius: 2px;
padding: 10px;
box-shadow: 2px 3px 16px rgba(0,0,0,.25);
z-index: 150;
transition: transform .15s ease-out;
pointer-events: none; /* zones inside re-enable */
max-width: 95vw;
}
body.dragging .drop-zones {
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.drop-zones { transition: none; }
}
.drop-zone {
min-width: 120px; min-height: 56px;
display: flex; align-items: center; justify-content: center;
padding: 8px 14px;
background: #fdf8f0;
border: 2px dashed #c4a96b; border-radius: 2px;
font: 700 12px 'Courier Prime','Courier New',monospace;
color: #6b5430; text-align: center;
user-select: none;
}
.drop-zone.over { background: #eaf5e0; border-color: #5a7a2a; color: #2d2316; }
.drop-zone.danger.over { background: #f7e8e0; border-color: #7a2020; color: #7a2020; }
.drop-zone[hidden] { display: none; }
/* Focus ring for the chip-menu when it appears (for screen-reader users
who navigate to it with their AT). */
.chip-menu:focus { outline: none; }
/* ───── Poem permalink renderer ───────────────────────────────────────────── */
/* Base permalink styling — the Plain / Reader baseline. Fancy mode layers
decoration on top via the server-emitted `body.view-fancy` class (1.12). */
.poem-view {
max-width: 720px; margin: 24px auto; padding: 24px 28px;
background: #fdf8f0; border: 2px solid #c4a96b; border-radius: 2px;
box-shadow: 2px 3px 14px rgba(0,0,0,.18);
}
.poem-view-head { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e0d4b0; }
.poem-view-title {
color: #2d2316; margin: 0 0 8px;
font: 700 1.8rem 'Playfair Display', Georgia, serif;
display: flex; flex-direction: column; gap: 2px;
}
.poem-view-title-main { font: inherit; }
.poem-view-title-after {
font: italic 1rem 'Playfair Display', Georgia, serif;
color: #5a3a18; font-weight: 400;
}
.poem-view-title-after cite { font-style: italic; }
.poem-view-attribution {
font: 0.85rem 'Playfair Display SC', Georgia, serif;
font-variant: small-caps;
letter-spacing: .08em;
color: #6b5430;
margin: 0;
}
.poem-attr-link { color: #5a3a18; text-decoration: underline; text-decoration-style: dotted; }
.poem-after-link { color: #5a3a18; text-decoration: underline; text-decoration-style: dotted; }
.poem-view-body { padding: 8px 0 4px; }
.poem-line-out {
font: 1.05rem 'Playfair Display', Georgia, serif; color: #2d2316;
margin: 0; padding: 6px 0 6px 2em; line-height: 1.6; text-indent: -2em;
}
.poem-line-out:empty::before { content: '\00A0'; } /* preserve blank lines */
.poem-horse {
color: inherit; text-decoration: none;
border-bottom: 1px dotted #c4a96b;
}
a.poem-horse:hover { border-bottom-color: #5a7a2a; }
.poem-view-tags {
margin-top: 16px; padding-top: 12px; border-top: 1px solid #e0d4b0;
display: flex; flex-direction: column; gap: 6px;
}
.poem-tag-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.poem-tag-cat {
font: 700 10px 'Courier Prime','Courier New',monospace; color: #8a7050;
text-transform: uppercase; letter-spacing: .07em;
min-width: 110px;
}
.poem-tag-list { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.poem-tag {
font: 13px 'Courier Prime','Courier New',monospace; color: #5a3a18;
text-decoration: none; padding: 2px 6px; border-radius: 2px;
border: 1px solid #c4a96b; background: #f0ead8;
}
.poem-tag:hover { background: #d8e6b8; border-color: #5a7a2a; color: #2d2316; }
.poem-tag-group.cw .poem-tag { border-style: dashed; color: #7a2020; background: #f7e8e0; border-color: #a86020; }
.poem-view-footer {
margin-top: 16px; padding-top: 12px; border-top: 1px solid #e0d4b0;
display: flex; gap: 14px; flex-wrap: wrap;
font: 11px 'Courier Prime','Courier New',monospace; color: #8a7050;
}
.poem-view-footer code { color: #6b5430; }
.poem-export-btns { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.poem-export-btn {
font: 11px 'Courier Prime','Courier New',monospace;
color: #8a7050; background: none;
border: 1px solid #c4a96b; border-radius: 2px;
padding: 2px 7px; cursor: pointer;
}
.poem-export-btn:hover:not(:disabled) { color: #2d2316; border-color: #8a7050; }
.poem-export-btn:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 520px){
.poem-view { padding: 18px 16px; margin: 12px; }
.poem-tag-cat { min-width: auto; }
}
/* ───── Fancy mode skin (decoration ported from 1.6 pasture mode) ─────────────
Ported from tumblr-theme.html — same chip decoration (legs/tail via pseudo-
elements, coat colours via class, famous shimmer). The base rules above are
the Plain / Reader baseline; everything below is gated on the server-emitted
site-wide `body.view-fancy` class (1.12).
Coat-class variables live in :root so the editor and other surfaces can
reuse them when they pick up the styling. */
:root {
--coat-bay-bg: #7a3520; --coat-bay-fg: #f5ecd7;
--coat-black-bg: #1c1c1c; --coat-black-fg: #e8d5b0;
--coat-grey-bg: #7a7a7a; --coat-grey-fg: #f0ead6;
--coat-chestnut-bg: #8b3a1f; --coat-chestnut-fg: #fae8c8;
--coat-palomino-bg: #c8961a; --coat-palomino-fg: #2a1800;
--coat-greywhite-bg: #c8bfaa; --coat-greywhite-fg: #1c1008;
--coat-liver-bg: #4a2812; --coat-liver-fg: #ead8b8;
--coat-roan-bg: #8a6a5a; --coat-roan-fg: #f0e4d0;
}
/* ── Plain: grass-backdrop container + cream note-box panels ──────────────────
Plain keeps the field as a decorative backdrop *on each container*, with the
header / tags / footer rendered as pinned cream note-boxes. Fancy diverges
below — there the body-level grass field becomes the surface and content
floats directly on it. (Coat colours, the famous shimmer, and the poem-body
line treatment stay shared via `view-decorated` further down.) */
/* All .text-page surfaces get the cream card in Plain — covers Featured, Browse,
profile, drafts, collection pages, and legal pages uniformly. */
body.view-plain:not(.admin-page) .text-page {
background: #fdf8f0; border: 2px solid #c4a96b; border-radius: 2px;
box-shadow: 2px 3px 14px rgba(0,0,0,.18);
padding: 24px 28px; margin: 24px auto;
}
body.view-plain:not(.admin-page) .collection-page {
background: #fdf8f0; border: 2px solid #c4a96b; border-radius: 2px;
box-shadow: 2px 3px 14px rgba(0,0,0,.18);
padding: 24px 28px; margin: 24px auto;
}
body.view-plain:not(.admin-page) .collection-page .collection-chips {
background-color: transparent;
background-image: none;
}
body.view-plain:not(.admin-page) .collection-chips,
body.view-plain:not(.admin-page) .profile-bio-poem,
body.view-plain:not(.admin-page) .queue-poem {
background-color: #4d7432;
background-image: url('/static/grass.svg');
background-size: 40px 40px;
border-color: #6b4820;
color: #fdf8f0;
}
/* Bio poem inside the cream profile card: cancel the grass — revert to the
base inset style (.profile-bio-poem has background:#f5eedc by default).
More specific than the rule above so it wins when inside .profile-page. */
body.view-plain:not(.admin-page) .profile-page .profile-bio-poem {
background-color: #f5eedc;
background-image: none;
color: #2d2316;
border-color: #c4a96b;
}
body.view-plain .poem-view-head,
body.view-plain .poem-view-tags,
body.view-plain .poem-view-footer {
color: #2d2316;
}
body.view-plain .poem-view-head { margin-bottom: 18px; }
body.view-plain .poem-view-tags { margin-top: 18px; }
body.view-plain .poem-view-footer { margin-top: 18px; }
body.view-plain .poem-view-title,
body.view-plain .poem-view-attribution,
body.view-plain .poem-view-footer,
body.view-plain .poem-view-footer code {
color: #2d2316;
}
/* ── Fancy (1.12 step 4): the field IS the surface ───────────────────────────
The site already paints the grass field on (the .container is
transparent), so in Fancy the display containers simply go transparent and
the poem floats directly on that field — this is also the bio-poem
"transparent-to-grass" fix. Variant C "ink-on-field": the title + poem float
BARE (cream, dark halo for legibility, the stars of the page); the
utilitarian clusters (tags, footer) become INVERTED NOTES — dark fill, warm
tan text, framed by a gold hairline. Non-horse text is de-emphasised. */
body.view-fancy .poem-view,
body.view-fancy .collection-chips,
body.view-fancy .profile-bio-poem,
body.view-fancy .queue-poem {
background: transparent;
border: none;
box-shadow: none;
color: #fdf8f0;
}
/* header floats bare — no panel */
body.view-fancy .poem-view-head {
background: transparent;
border: none;
padding: 0;
margin-bottom: 18px;
}
body.view-fancy .poem-view-title {
color: #fdf8f0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .5);
}
body.view-fancy .poem-view-title-after { color: rgba(253, 248, 240, .78); }
/* attribution de-emphasised: warm tan, letter-spaced, haloed for legibility */
body.view-fancy .poem-view-attribution {
font: 0.95rem 'Playfair Display SC', Georgia, serif;
font-variant: small-caps;
color: #e8d5b0;
text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
letter-spacing: .1em;
}
body.view-fancy .poem-attr-link,
body.view-fancy .poem-after-link { color: #f0e0b8; }
/* tags + footer: inverted notes with a gold hairline (the contrasting edge) */
body.view-fancy .poem-view-tags,
body.view-fancy .poem-view-footer {
background: rgba(38, 29, 18, 0.86);
border: 1px solid rgba(196, 169, 107, 0.95);
border-radius: 3px;
color: #e8d5b0;
}
body.view-fancy .poem-view-tags { margin-top: 18px; padding: 12px 16px; }
body.view-fancy .poem-view-footer { margin-top: 18px; padding: 9px 14px; }
body.view-fancy .poem-tag-cat { color: rgba(232, 213, 176, .72); }
body.view-fancy .poem-tag {
color: #e8d5b0;
background: transparent;
border-color: rgba(196, 169, 107, .6);
}
body.view-fancy .poem-tag:hover {
background: rgba(196, 169, 107, .18);
border-color: rgba(196, 169, 107, .95);
color: #fdf8f0;
}
body.view-fancy .poem-view-footer code { color: #e8d5b0; }
body.view-fancy .poem-export-btn {
color: #e8d5b0;
border-color: rgba(196, 169, 107, .55);
}
body.view-fancy .poem-export-btn:hover:not(:disabled) {
color: #fdf8f0;
border-color: rgba(196, 169, 107, .95);
}
/* admin tag editing carries its own light surfaces, so it stays legible on the
dark note (admin guts stay utilitarian even in Fancy); only the bare hint text
needs lightening so "none applied" reads against the dark fill. */
body.view-fancy .admin-hint { color: #cbb98a; }
body.view-fancy .poem-view-body {
/* Extra vertical room so chip heads + legs don't crash into the head/tag
blocks. Head extends 26px above chip top, legs 8px below chip bottom. */
padding: 26px 0 12px;
}
body.view-plain .poem-view-body { padding: 12px 0 8px; }
body.view-plain .poem-view-attribution {
font: 0.9rem 'Playfair Display SC', Georgia, serif;
font-variant: small-caps;
letter-spacing: .08em;
}
body.view-decorated .poem-line-out {
color: #fdf8f0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
padding-left: 0; text-indent: 0;
}
body.view-fancy .poem-line-out { line-height: 2.75; }
body.view-plain .poem-line-out { font: 1.05rem/2.0 'IM Fell English', Georgia, serif; }
/* ── Decorated chips — Fancy mode (legs / tail / head, scattered tilt) ─────── */
body.view-fancy .poem-horse {
display: inline-block;
position: relative;
overflow: visible;
padding: 1px 8px 4px;
margin: 5px 4px;
font-family: 'Playfair Display SC', Georgia, serif;
font-size: 1.25rem;
font-weight: 700;
font-variant: small-caps;
line-height: 1;
letter-spacing: .04em;
text-decoration: none;
border: none;
border-radius: 8px;
vertical-align: baseline;
background: var(--bg);
color: var(--fg);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.22);
text-shadow: none;
transition: transform .1s, box-shadow .1s;
}
/* Coat-class wiring — same hash buckets as matcher._tile_appearance. The
--bg/--fg pair is shared by both decorated modes; only Fancy adds the tilt. */
body.view-decorated .coat-bay { --bg: var(--coat-bay-bg); --fg: var(--coat-bay-fg); }
body.view-decorated .coat-black { --bg: var(--coat-black-bg); --fg: var(--coat-black-fg); }
body.view-decorated .coat-grey { --bg: var(--coat-grey-bg); --fg: var(--coat-grey-fg); }
body.view-decorated .coat-chestnut { --bg: var(--coat-chestnut-bg); --fg: var(--coat-chestnut-fg); }
body.view-decorated .coat-palomino { --bg: var(--coat-palomino-bg); --fg: var(--coat-palomino-fg); }
body.view-decorated .coat-greywhite { --bg: var(--coat-greywhite-bg); --fg: var(--coat-greywhite-fg); }
body.view-decorated .coat-liver { --bg: var(--coat-liver-bg); --fg: var(--coat-liver-fg); }
body.view-decorated .coat-roan { --bg: var(--coat-roan-bg); --fg: var(--coat-roan-fg); }
body.view-fancy .coat-bay { transform: rotate(-1.5deg); }
body.view-fancy .coat-black { transform: rotate( 1.0deg); }
body.view-fancy .coat-grey { transform: rotate(-0.7deg); }
body.view-fancy .coat-chestnut { transform: rotate( 1.3deg); }
body.view-fancy .coat-palomino { transform: rotate(-1.0deg); }
body.view-fancy .coat-greywhite { transform: rotate( 0.5deg); }
body.view-fancy .coat-liver { transform: rotate(-1.3deg); }
body.view-fancy .coat-roan { transform: rotate( 0.8deg); }
/* ::before draws the head glyph (top) plus four leg stubs (bottom) using
background gradients. Single pseudo-element keeps the markup clean. */
body.view-fancy .poem-horse::before {
content: '♞';
position: absolute;
pointer-events: none;
left: 0; top: -26px;
width: 100%; height: calc(100% + 34px);
color: var(--bg);
font-size: 32px; line-height: 1;
background:
linear-gradient(var(--bg), var(--bg)) 5px 100% / 2px 8px no-repeat,
linear-gradient(var(--bg), var(--bg)) 13px 100% / 2px 8px no-repeat,
linear-gradient(var(--bg), var(--bg)) calc(100% - 13px) 100% / 2px 8px no-repeat,
linear-gradient(var(--bg), var(--bg)) calc(100% - 5px) 100% / 2px 8px no-repeat;
}
/* ::after draws the tail off the right side. */
body.view-fancy .poem-horse::after {
content: '∫';
position: absolute;
pointer-events: none;
right: -13px; top: 60%;
transform: translateY(-50%) scaleY(-1);
color: var(--bg);
font-size: 28px; line-height: 1;
}
/* Reversed direction — name-hash parity puts roughly half of horses facing
the other way so a line of them doesn't look like a conga line. */
body.view-fancy .poem-horse.rev::before {
left: auto; right: 0; transform: scaleX(-1);
}
body.view-fancy .poem-horse.rev::after {
right: auto; left: -13px;
transform: translateY(-50%) scaleY(-1) scaleX(-1);
}
body.view-fancy .poem-horse:hover {
transform: scale(1.06) !important;
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.28);
}
/* ── Famous-horse shimmer ────────────────────────────────────────────────── */
@keyframes poem-famous-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
body.view-decorated .poem-horse.famous-horse {
background-color: var(--bg);
background-image: linear-gradient(
105deg,
transparent 38%,
rgba(255, 255, 255, 0.55) 50%,
transparent 62%
);
background-size: 200% 100%;
animation: poem-famous-shimmer 2.5s linear infinite;
box-shadow:
2px 2px 4px rgba(0, 0, 0, 0.25),
0 0 0 1.5px rgba(200, 160, 0, 0.55);
}
/* ── Functional colour chips — Plain mode (coat colours, no body parts, no tilt) */
body.view-plain .poem-horse {
display: inline-block;
padding: 4px 10px;
margin: 3px 2px;
font: 700 0.98em 'Courier Prime','Courier New',monospace;
text-decoration: none;
border: none;
border-radius: 6px;
background: var(--bg);
color: var(--fg);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
text-shadow: none;
}
body.view-plain a.poem-horse:hover { filter: brightness(1.08); }
/* Reduced-motion: drop the shimmer animation everywhere it runs, and stop the
Fancy rotational tilt. Chips stay decorated — only the motion is removed.
(Motion is decoupled from mode: a reduced-motion visitor keeps their chosen
mode, just without movement.) */
@media (prefers-reduced-motion: reduce) {
body.view-fancy .poem-horse {
transform: none;
transition: none;
}
body.view-decorated .poem-horse.famous-horse {
animation: none;
background-image: none;
}
}
/* Mobile tightening (1.12 step 6) — Fancy holds up on a narrow viewport at the
current chip scale: registered names cap at 18 chars, so even the longest
single token fits one chip-line on a phone (verified). No chip shrink needed.
We only keep the extra line-height (head glyphs clear the previous line's leg
stubs) and nudge the floating title down so it doesn't dominate a phone.
(Enlarging chips + harmonising the chip font with the display type is routed
to the style/font pass, where chip size + font are decided together.) */
@media (max-width: 520px) {
body.view-fancy .poem-line-out { line-height: 3.0; }
body.view-fancy .poem-view-title { font-size: 1.45rem; }
body.view-fancy .poem-view-body { padding-top: 22px; }
}
/* ───── Reader skin (1.12 step 5) ─────────────────────────────────────────────
The 1.11 print stylesheet, ported to screen: off-white paper (no field),
Smokum/Abril/IM-Fell/Playfair-SC type toolbox, small-caps body with the
turnover indent, underline-separated names, woodprint (stamped-block)
buttons. Decisions (Clover-reviewed): W1 stamped block + pressed/inked
engaged state, warm #f5efe0 paper, masthead stays print-only (.print-head /
.print-colophon remain display:none on screen). Sizes scaled pt -> rem.
Reader is NOT a `view-decorated` mode, so it falls through the base
.poem-view styling, which these rules override. */
body.view-reader {
background-color: #f5efe0;
background-image: none;
color: #0f0c06;
}
body.view-reader .poem-view {
background: transparent;
border: none;
box-shadow: none;
}
/* header centred, no rule (the body's top border is the separator) */
body.view-reader .poem-view-head {
text-align: center;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
body.view-reader .poem-view-title {
display: block;
text-align: center;
font: 2.1rem/1.1 'Abril Fatface', Georgia, serif;
font-weight: normal;
letter-spacing: .03em;
color: #0f0c06;
}
body.view-reader .poem-view-title-main { display: block; font: inherit; }
body.view-reader .poem-view-title-after {
display: block;
margin-top: 4px;
font: italic 1.2rem 'IM Fell English', Georgia, serif;
color: #3a2e18;
}
body.view-reader .poem-view-attribution {
text-align: center;
font: 1rem 'Playfair Display SC', Georgia, serif;
letter-spacing: .1em;
color: #3a2e18;
}
body.view-reader .poem-attr-link,
body.view-reader .poem-after-link {
color: inherit;
text-decoration: none;
border-bottom: 1px dotted #3a2e18;
}
/* body — IM Fell small-caps, turnover indent inherited from base .poem-line-out */
body.view-reader .poem-view-body {
border-top: 1px solid #0f0c06;
margin-top: 14px;
padding: 10px 0 0;
}
body.view-reader .poem-line-out {
font: 1.35rem/1.7 'IM Fell English', Georgia, serif;
font-variant: small-caps;
letter-spacing: .04em;
color: #0f0c06;
}
/* names — no chip; a thin underline marks extent, the gap is the separator */
body.view-reader .poem-horse {
border: none;
color: #0f0c06;
text-decoration: underline;
text-decoration-color: #b7a584;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
body.view-reader a.poem-horse:hover { text-decoration-color: #0f0c06; }
/* tags — Playfair SC, comma-separated inline */
body.view-reader .poem-view-tags {
margin-top: 16px;
padding-top: 10px;
border-top: 1px solid #0f0c06;
}
body.view-reader .poem-tag-group { display: block; margin-bottom: 4px; }
body.view-reader .poem-tag-cat {
font: 0.85rem 'Playfair Display SC', Georgia, serif;
letter-spacing: .1em;
color: #5a4a28;
text-transform: none;
min-width: 0;
margin-right: 8px;
}
body.view-reader .poem-tag-list { display: inline; }
body.view-reader .poem-tag {
display: inline;
font: 0.95rem 'Playfair Display SC', Georgia, serif;
color: #5a4a28;
text-decoration: none;
padding: 0;
background: none;
border: none;
}
body.view-reader .poem-tag::after { content: ',\00A0'; }
body.view-reader .poem-tag:last-child::after { content: ''; }
body.view-reader .poem-tag-group.cw .poem-tag {
color: #7a2020;
background: none;
border: none;
}
/* bio poem + queue follow the same paper-transparent treatment */
body.view-reader .profile-bio-poem,
body.view-reader .queue-poem {
background: transparent;
border: none;
}
/* footer + woodprint (stamped-block) buttons */
body.view-reader .poem-view-footer {
margin-top: 16px;
padding-top: 10px;
border-top: 1px solid #0f0c06;
font: 0.9rem 'Playfair Display SC', Georgia, serif;
letter-spacing: .06em;
color: #5a4a28;
}
body.view-reader .poem-view-footer code {
color: #5a4a28;
font-family: 'Courier Prime', 'Courier New', monospace;
}
body.view-reader .poem-export-btn,
body.view-reader .poem-report-btn,
body.view-reader .poem-ribbon-btn {
font: 0.85rem 'Playfair Display SC', Georgia, serif;
letter-spacing: .06em;
color: #0f0c06;
background: #f5efe0;
border: 2px solid #0f0c06;
border-radius: 0;
box-shadow: 2px 2px 0 #0f0c06;
padding: 5px 12px;
opacity: 1;
cursor: pointer;
transition: box-shadow .08s, transform .08s, background .08s, color .08s;
}
body.view-reader .poem-ribbon-btn { font-size: 16px; padding: 4px 9px; }
body.view-reader .poem-export-btn:hover:not(:disabled),
body.view-reader .poem-report-btn:hover,
body.view-reader .poem-ribbon-btn:hover {
box-shadow: 3px 3px 0 #0f0c06;
transform: translate(-1px, -1px);
color: #0f0c06;
border-color: #0f0c06;
}
body.view-reader .poem-export-btn:active,
body.view-reader .poem-report-btn:active,
body.view-reader .poem-ribbon-btn:active {
box-shadow: 1px 1px 0 #0f0c06;
transform: translate(1px, 1px);
}
body.view-reader .poem-export-btn:disabled {
opacity: .55;
box-shadow: 1px 1px 0 #0f0c06;
transform: translate(1px, 1px);
cursor: default;
}
/* engaged / saved ribbon (and any aria-pressed control): pressed in + inked */
body.view-reader .poem-ribbon-btn.poem-ribbon-saved,
body.view-reader .poem-ribbon-btn[aria-pressed="true"] {
background: #0f0c06;
color: #f5efe0;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5);
transform: translate(2px, 2px);
}
/* Reader mode: paper background — restore dark text for page-level elements */
body.view-reader h1.page-title { color: #0f0c06; text-shadow: none; }
body.view-reader .page-desc { color: #3a2e18; text-shadow: none; }
body.view-reader .collection-empty,
body.view-reader .collection-count { color: #6b5430; text-shadow: none; }
/* Fancy mode: featured page + poem-index sit on grass field — needs cream text */
body.view-fancy .text-page h2 { color: #e8d5b0; }
body.view-fancy .poem-index-title { color: #fdf8f0; }
body.view-fancy .poem-index-title:hover { color: #fdf8f0; }
body.view-fancy .poem-index-meta { color: #c8b888; }
body.view-fancy .poem-index-item { border-color: rgba(196, 169, 107, 0.35); }
body.view-fancy .featured-empty,
body.view-fancy .featured-browse-link a,
body.view-fancy .text-page-updated { color: #c8b888; }
/* Browse page fancy mode — dark box treatment */
body.view-fancy .browse-page h1 {
color: #fdf8f0;
text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
}
/* filter form: dark box */
body.view-fancy .browse-filters {
background: rgba(38, 29, 18, 0.86);
border: 1px solid rgba(196, 169, 107, 0.6);
border-radius: 3px;
padding: 14px 16px;
}
body.view-fancy .browse-filter-label { color: #e8d5b0; }
body.view-fancy .browse-filter-check { color: #e8d5b0; }
body.view-fancy .browse-clear { color: #f0b8a0; }
body.view-fancy .browse-clear:hover { color: #fdf8f0; }
body.view-fancy .browse-select {
background: rgba(38, 29, 18, 0.6);
border-color: rgba(196, 169, 107, 0.55);
color: #e8d5b0;
}
/* tag panel nested inside dark box */
body.view-fancy .browse-tag-panel {
background: rgba(255, 248, 230, 0.05);
border-color: rgba(196, 169, 107, 0.35);
}
body.view-fancy .browse-panel-heading { color: rgba(232, 213, 176, .7); }
body.view-fancy .browse-tag-cat > summary.browse-tag-cat-label {
color: #e8d5b0;
background: rgba(38, 29, 18, 0.5);
border-color: rgba(196, 169, 107, 0.45);
}
body.view-fancy .browse-tag-check-item { color: #e8d5b0; }
body.view-fancy .browse-tag-check-item:has(input:checked) { color: #fdf8f0; }
/* CW panel */
body.view-fancy .browse-cw-heading {
color: #e8c8a8;
background: rgba(38, 29, 18, 0.5);
border-color: rgba(196, 169, 107, 0.4);
}
body.view-fancy .browse-cw-body {
background: rgba(255, 248, 230, 0.04);
border-color: rgba(196, 169, 107, 0.3);
}
body.view-fancy .browse-cw-item:has(input:checked) { color: #f0c8a0; }
/* ratio slider */
body.view-fancy .browse-ratio-hint { color: rgba(232, 213, 176, .65); }
body.view-fancy .browse-ratio-range-display { color: #c8e8a0; }
body.view-fancy .browse-dual-range-track-bg { background: rgba(196, 169, 107, 0.35); }
body.view-fancy .browse-dual-range-fill { background: #7aaa3a; }
body.view-fancy .browse-ratio-apply {
background: rgba(38, 29, 18, 0.6);
border-color: rgba(196, 169, 107, 0.6);
color: #e8d5b0;
}
body.view-fancy .browse-ratio-apply:hover { background: rgba(196, 169, 107, 0.2); }
/* results section: dark box */
body.view-fancy .browse-results {
background: rgba(38, 29, 18, 0.86);
border: 1px solid rgba(196, 169, 107, 0.6);
border-radius: 3px;
padding: 12px 16px;
}
body.view-fancy .browse-count { color: #c8b888; }
body.view-fancy .browse-active-tag { color: #c8e8a0; }
body.view-fancy .browse-excluded-tag {
background: rgba(160, 80, 40, 0.3);
border-color: rgba(200, 100, 60, 0.5);
color: #f0c0a0;
}
body.view-fancy .browse-pagination { border-top-color: rgba(196, 169, 107, 0.3); }
body.view-fancy .browse-page-btn {
background: rgba(38, 29, 18, 0.5);
border-color: rgba(196, 169, 107, 0.55);
color: #e8d5b0;
}
body.view-fancy .browse-page-btn:hover { background: rgba(196, 169, 107, 0.2); }
body.view-fancy .browse-page-disabled { color: rgba(196, 169, 107, 0.45); border-color: rgba(196, 169, 107, 0.25); }
body.view-fancy .browse-page-info { color: #c8b888; }
/* Tag picker — inside the publish modal */
.modal-tag-sections { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }
.tag-section {
border: 2px dashed #c4a96b; border-radius: 2px;
padding: 10px 12px; background: #fdf8f0;
}
.tag-section-head {
display: flex; align-items: baseline; gap: 8px;
margin-bottom: 8px;
}
.tag-section-label {
font: 700 11px 'Courier Prime','Courier New',monospace;
text-transform: uppercase; letter-spacing: .06em; color: #6b5430;
}
.tag-section-hint {
font: italic 11px Georgia,serif; color: #8a7050;
}
.tag-chip-cloud {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.tag-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 7px 10px; margin: 0;
font: 13px 'Courier Prime','Courier New',monospace;
background: #f0ead8; color: #2d2316;
border: 2px solid #c4a96b; border-radius: 2px;
cursor: pointer; user-select: none;
min-height: 36px;
position: relative;
/* Override the global `label` text-transform / letter-spacing / font-size /
color so chip labels read as plain text. */
text-transform: none; letter-spacing: normal; font-weight: normal;
}
.tag-chip span { text-transform: none; letter-spacing: normal; font-size: 13px; color: #2d2316; }
.tag-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tag-chip:has(input:checked) {
background: #d8e6b8; border-color: #5a7a2a; color: #2d2316;
}
.tag-chip:focus-within { outline: 3px solid #5a7a2a; outline-offset: 2px; }
.tag-chip.content-warning { border-style: dashed; }
.tag-chip.content-warning:has(input:checked) {
background: #f7e3c8; border-color: #a86020;
}
.tag-chip.tag-pending { border-style: dotted; opacity: .9; }
.tag-chip em { font: italic 10px Georgia,serif; color: #8a7050; }
.tag-suggest-btn {
margin-top: 8px;
background: none; border: 1px dashed #c4a96b; border-radius: 2px;
color: #6b5430; padding: 6px 10px; cursor: pointer;
font: 12px 'Courier Prime','Courier New',monospace;
box-shadow: none;
}
.tag-suggest-btn:hover { border-color: #5a7a2a; color: #5a7a2a; }
.tag-suggest-btn:focus-visible { outline: 2px solid #5a7a2a; outline-offset: 2px; }
/* Post modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(45,35,22,.55); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal { background: #faf5e9; border-radius: 2px; padding: 24px; width: min(560px, 95vw); max-height: 90vh; overflow-y: auto; box-shadow: 2px 3px 16px rgba(0,0,0,.2); }
.modal h3 { font: 700 1.1rem 'Playfair Display',Georgia,serif; color: #2d2316; margin-bottom: 14px; }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.modal-err { margin-top: 10px; }
/* Toast */
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #3a5a1a; color: #fff; padding: 10px 22px; border-radius: 2px; z-index: 9999; font: 13px 'Courier Prime','Courier New',monospace; pointer-events: none; box-shadow: 2px 2px 6px rgba(0,0,0,.3); }
/* Page-size selector */
.page-size-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.page-size-row label {
font: 10px 'Courier Prime','Courier New',monospace;
text-transform: uppercase;
letter-spacing: .05em;
color: #a08060;
margin: 0;
}
.page-size-row select {
font: 11px 'Courier Prime','Courier New',monospace;
background: #fff9ee;
border: 1px solid #c4a96b;
border-radius: 2px;
color: #2d2316;
padding: 2px 4px;
cursor: pointer;
}
/* Search pager */
.search-pager { display: none; align-items: center; gap: 6px; margin-top: 6px; }
.search-pager button {
padding: 3px 10px;
font: 700 11px 'Courier Prime','Courier New',monospace;
background: #f5e9c8;
color: #6b5430;
border: 1px solid #c4a96b;
border-radius: 2px;
box-shadow: 1px 1px 0 #c4a96b;
cursor: pointer;
margin: 0;
}
.search-pager button:disabled { opacity: .4; cursor: default; box-shadow: none; }
.search-pager button:not(:disabled):active { transform: translate(1px,1px); box-shadow: none; }
.pager-info { font: 11px 'Courier Prime','Courier New',monospace; color: #8a7050; flex: 1; text-align: center; }
/* History panel header */
.history-head { font-size: 11px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: .04em; }
/* Modal tag row (poetry post modal) */
.modal-tags-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; padding: 10px; background: #f0ead8; border: 1px solid #c4a96b; border-radius: 2px; }
/* Poetry page small utilities */
.back-nav { margin-bottom: 14px; }
.stable-count { font-weight: normal; color: #a08060; font-size: 11px; }
.stable-controls { display: flex; gap: 4px; }
.modal-name-row { display: flex; gap: 6px; margin-bottom: 4px; }
.modal-name-row input { flex: 1; margin: 0; }
.text-muted { color: #aaa; }
/* ── Horse popover ── */
.horse-popover {
position: absolute;
z-index: 500;
width: 260px;
background: #faf5e9;
border-radius: 3px;
box-shadow: 3px 4px 16px rgba(0,0,0,.22), 0 0 0 1px rgba(139,105,20,.18);
padding: 16px 16px 14px;
font: 13px Georgia, serif;
color: #2d2316;
}
.horse-popover[hidden] { display: none; }
.popover-close {
position: absolute;
top: 8px; right: 36px;
background: none;
border: none;
font-size: 18px;
line-height: 1;
color: #a08060;
cursor: pointer;
padding: 2px 6px;
border-radius: 2px;
box-shadow: none;
margin: 0;
}
.popover-close:hover { color: #6b3a10; background: #f0ead8; }
/* Ribbon save button — bottom of popover */
.popover-ribbon {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
margin-top: 10px;
padding: 6px 10px;
background: none;
border: 1px solid #d4c490;
border-radius: 2px;
box-shadow: none;
font: 13px Georgia, serif;
color: #7a6a3a;
cursor: pointer;
opacity: 0.7;
transition: opacity .15s, background .12s, color .12s;
text-align: left;
}
.popover-ribbon:hover { opacity: 1; background: #f0ead8; }
.popover-ribbon.ribbon-on { opacity: 1; color: #3a5a1a; border-color: #8ab060; background: #f0f5e8; }
.popover-ribbon:focus-visible { outline: 2px solid #5a7a2a; outline-offset: 2px; }
.popover-name {
font: 700 1rem/1.2 'Playfair Display', Georgia, serif;
margin-bottom: 6px;
padding-right: 28px; /* clear close button */
}
.popover-pq-link {
display: inline-block;
font: 11px 'Courier Prime', 'Courier New', monospace;
color: #5a7a2a;
text-decoration: none;
border-bottom: 1px solid #b5d68a;
margin-bottom: 12px;
}
.popover-pq-link:hover { color: #3d5a1a; border-bottom-color: #3d5a1a; }
.popover-actions { margin-bottom: 10px; }
.popover-pasture-btn {
width: 100%;
padding: 7px 12px;
background: #f5e9c8;
color: #6b5430;
border: 2px solid #c4a96b;
box-shadow: 2px 2px 0 #c4a96b;
border-radius: 2px;
cursor: pointer;
font: 700 11px 'Courier Prime', 'Courier New', monospace;
text-align: center;
margin: 0;
}
.popover-pasture-btn:hover { background: #ede0b0; }
.popover-pasture-btn:active { transform: translate(2px,2px); box-shadow: none; }
.popover-pasture-btn[data-state="in"] {
background: #eaf5e0;
color: #3a5a1a;
border-color: #b5d68a;
box-shadow: 2px 2px 0 #b5d68a;
}
.popover-pasture-btn[data-state="in"]:hover { background: #d4ecb8; }
/* Sign-in prompt */
.popover-signin-prompt {
font: 12px 'Courier Prime', 'Courier New', monospace;
color: #6b5430;
background: #fdf5e0;
border: 1px solid #c4a030;
border-radius: 2px;
padding: 6px 10px;
margin-bottom: 10px;
}
.popover-signin-link { color: #5a7a2a; font-weight: 700; }
@keyframes signin-flash {
0% { background: #fdf5e0; }
30% { background: #f5e8b8; }
100% { background: #fdf5e0; }
}
.popover-signin-prompt.signin-flash { animation: signin-flash .5s ease; }
/* Poems section */
.popover-poems-section { border-top: 1px solid #e0d4b0; padding-top: 10px; }
.popover-poems-head {
font: 700 10px 'Courier Prime', 'Courier New', monospace;
text-transform: uppercase;
letter-spacing: .06em;
color: #8a7050;
margin-bottom: 6px;
}
.popover-poem-link {
display: block;
font: 12px 'Courier Prime', 'Courier New', monospace;
color: #5a7a2a;
text-decoration: none;
padding: 3px 0;
border-bottom: 1px solid #e8d9b0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.popover-poem-link:last-child { border-bottom: none; }
.popover-poem-link:hover { color: #3a5a1a; text-decoration: underline; }
.popover-poems-loading,
.popover-poems-none {
font: italic 11px 'Courier Prime', 'Courier New', monospace;
color: #a08060;
}
/* ── Phase 1.28: Popover draft section ───────────────────────────────────── */
.popover-draft-head {
font: 700 11px 'Courier Prime','Courier New',monospace;
text-transform: uppercase; letter-spacing: .05em;
color: #6b5430; margin-bottom: 6px;
}
.popover-draft-btn {
display: block; width: 100%; text-align: left;
font: 13px 'Courier Prime','Courier New',monospace;
color: #3a6b1a; background: #f5f0e4;
border: 1px solid #c4a96b; border-radius: 2px;
padding: 5px 8px; margin-bottom: 4px; cursor: pointer;
}
.popover-draft-btn:hover { background: #ede0b0; }
.popover-draft-btn[disabled] { color: #6b5430; cursor: default; }
.popover-draft-expander {
display: block; width: 100%; text-align: left;
font: 12px 'Courier Prime','Courier New',monospace;
color: #6b5430; background: none; border: none;
padding: 4px 0; margin-top: 2px; cursor: pointer;
}
.popover-draft-expander:hover { color: #3a6b1a; }
.popover-draft-create {
display: flex; gap: 4px; margin-top: 6px;
}
.popover-draft-title-input {
flex: 1; font: 12px 'Courier Prime','Courier New',monospace;
border: 1px solid #c4a96b; background: #fdf8ed;
padding: 4px 6px; border-radius: 2px; color: #2d2316; min-width: 0;
}
.popover-draft-title-input:focus { outline: 2px solid #5a7a2a; outline-offset: 1px; }
.popover-draft-new-btn {
font: 12px 'Courier Prime','Courier New',monospace;
background: #5a7a2a; color: #fff;
border: 1px solid #3d5a1a; border-radius: 2px;
padding: 4px 8px; cursor: pointer; white-space: nowrap;
}
.popover-draft-new-btn:hover { background: #4a6a1a; }
.popover-draft-new-btn[disabled] { opacity: .6; cursor: default; }
/* ── Phase 1.28: Draft strip ─────────────────────────────────────────────── */
.draft-strip {
display: flex; justify-content: space-between; align-items: center;
margin-top: 10px; padding: 6px 10px;
background: #f5eedc; border: 1px solid #c4a96b; border-radius: 2px;
font: 12px 'Courier Prime','Courier New',monospace; color: #6b5430;
}
.draft-strip-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-strip-change {
margin-left: 8px; padding: 2px 8px; flex-shrink: 0;
font: 11px 'Courier Prime','Courier New',monospace;
background: #fdf8ed; color: #3a6b1a;
border: 1px solid #c4a96b; border-radius: 2px; cursor: pointer;
}
.draft-strip-change:hover { background: #ede0b0; }
.draft-strip-delete {
margin-left: 8px; padding: 2px 6px; flex-shrink: 0;
font: 11px 'Courier Prime','Courier New',monospace;
background: #fdf8ed; color: #8a3a1a;
border: 1px solid #c4a96b; border-radius: 2px; cursor: pointer;
}
.draft-strip-delete:hover { background: #f5d8c8; border-color: #a05030; }
.draft-strip-guest { background: #faf8f2; border-color: #d8cba8; color: #9a8a6a; }
.draft-strip-signin-link { color: #6b5430; }
.draft-strip-signin-link:hover { color: #3a2a10; }
/* ── Phase 1.28: Draft picker ────────────────────────────────────────────── */
.draft-picker-modal-body { max-width: 460px; width: 100%; }
.draft-picker-list { margin-bottom: 12px; }
.draft-picker-item {
display: flex; justify-content: space-between; align-items: baseline;
width: 100%; text-align: left; padding: 8px 10px;
font: 13px 'Courier Prime','Courier New',monospace;
background: #fdf8ed; border: 1px solid #c4a96b; border-radius: 2px;
margin-bottom: 4px; cursor: pointer; gap: 8px;
}
.draft-picker-item:hover { background: #ede0b0; }
.draft-picker-item-active { border-color: #5a7a2a; background: #eef5e4; }
.draft-picker-title { color: #2d2316; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-picker-meta { color: #a08060; font-size: 11px; flex-shrink: 0; white-space: nowrap; }
.draft-picker-divider { border-top: 1px solid #e0d4b0; margin: 6px 0; }
.draft-picker-new { color: #5a7a2a; font-style: italic; }
/* ── Phase 1.28: Clear dialogs ───────────────────────────────────────────── */
.dialog-body { font: 13px 'Courier Prime','Courier New',monospace; color: #2d2316; margin: 0 0 14px; }
.danger-sec {
background: #fff0ef; color: #7a2020;
border-color: #e8b0a8; box-shadow: 2px 2px 0 #e8b0a8;
}
.danger-sec:hover { background: #fde0de; }
/* Poetry-page wider layout */
@media (min-width: 900px) {
.container.wide { max-width: 1200px; }
.poetry-wrap { grid-template-columns: 300px 1fr; }
.search-results { max-height: 340px; }
}
@media (max-width: 640px) {
.poetry-wrap { grid-template-columns: 1fr; }
/* Prevent iOS auto-zoom: Safari zooms in when a focused input has font-size < 16px,
then leaves the page at a broken zoom level after the keyboard dismisses. */
input, select, textarea { font-size: 16px !important; }
}
/* ── Phase 1.8: Browse ───────────────────────────────────────────────────── */
.browse-page { max-width: 720px; }
.browse-filters { margin-bottom: 16px; }
.browse-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.browse-filter-label { font: 12px 'Courier Prime','Courier New',monospace; color: #6b5430; white-space: nowrap; }
.browse-select { font: 13px 'Courier Prime','Courier New',monospace; border: 1px solid #c4a96b; background: #fdf8ed; padding: 4px 6px; border-radius: 2px; color: #2d2316; cursor: pointer; }
.browse-select:focus { outline: 2px solid #5a7a2a; outline-offset: 1px; }
.browse-filter-check { font: 13px 'Courier Prime','Courier New',monospace; color: #2d2316; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.browse-filter-check input { cursor: pointer; }
.browse-clear { font: 12px 'Courier Prime','Courier New',monospace; color: #7a3030; text-decoration: underline; white-space: nowrap; }
.browse-clear:hover { color: #3a1010; }
.browse-count { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; margin-bottom: 12px; }
.browse-active-tag { font-weight: 700; color: #3a5a1a; }
/* Tag multi-checkbox panel */
.browse-panel-heading { display: block; font: bold 10px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .06em; color: #7a6a3a; margin-bottom: 4px; width: 100%; }
.browse-tag-panel { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 6px 0 10px; padding: 10px 12px; background: #faf7ee; border: 1px solid #ddd0a0; border-radius: 3px; }
.browse-tag-cat { min-width: 0; }
.browse-tag-cat > summary.browse-tag-cat-label { list-style: none; font: bold 10px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .06em; color: #7a6a3a; cursor: pointer; user-select: none; padding: 3px 6px; background: #f0ead8; border: 1px solid #ddd0a0; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.browse-tag-cat > summary.browse-tag-cat-label::after { content: '▸'; font-size: 9px; }
.browse-tag-cat[open] > summary.browse-tag-cat-label::after { content: '▾'; }
.browse-tag-cat > summary::-webkit-details-marker { display: none; }
.browse-tag-checks { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 5px; max-width: 320px; }
.browse-tag-check-item { font: 13px 'Courier Prime','Courier New',monospace; color: #2d2316; display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.browse-tag-check-item input { cursor: pointer; }
.browse-tag-check-item:has(input:checked) { font-weight: 700; color: #3a5a1a; }
/* CW exclusion panel */
.browse-cw-panel { margin: 4px 0 8px; }
.browse-cw-heading { list-style: none; font: bold 10px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .06em; color: #9a5a3a; cursor: pointer; user-select: none; padding: 3px 8px; background: #fdf3ee; border: 1px solid #e0b8a0; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }
.browse-cw-heading::after { content: '▸'; font-size: 9px; }
.browse-cw-panel[open] .browse-cw-heading::after { content: '▾'; }
.browse-cw-heading::-webkit-details-marker { display: none; }
.browse-cw-body { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; padding: 8px 10px; background: #fdf8f4; border: 1px solid #e8c8b0; border-radius: 3px; }
.browse-cw-item:has(input:checked) { font-weight: 700; color: #9a3a1a; }
.browse-excluded-tag { background: #f8e8e0; border-color: #d09070; color: #7a3a1a; }
/* Ratio filter row — dual range */
.browse-ratio-row { margin-top: 6px; }
.browse-ratio-hint { font: 11px 'Courier Prime','Courier New',monospace; color: #a08060; font-style: italic; flex-basis: 100%; }
.browse-ratio-range-display { margin-left: 8px; font-weight: 700; color: #5a7a2a; }
.browse-dual-range-wrap { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-basis: 100%; }
.browse-dual-range-track { position: relative; height: 20px; width: 240px; flex-shrink: 0; }
.browse-dual-range-track-bg { position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%); background: #e0d4b0; border-radius: 2px; }
.browse-dual-range-fill { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: #5a7a2a; border-radius: 2px; pointer-events: none; }
.browse-dual-range-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; margin: 0; padding: 0; }
.browse-dual-range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #5a7a2a; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto; }
.browse-dual-range-input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #5a7a2a; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); cursor: pointer; pointer-events: auto; }
.browse-dual-range-input::-webkit-slider-runnable-track { background: transparent; }
.browse-dual-range-input::-moz-range-track { background: transparent; }
.browse-ratio-apply { font: 12px 'Courier Prime','Courier New',monospace; background: #f0e8cc; border: 1px solid #c4a96b; border-radius: 2px; padding: 3px 8px; cursor: pointer; color: #2d2316; }
.browse-ratio-apply:hover { background: #ede0b0; }
.poem-index { list-style: none; padding: 0; margin: 0; }
.poem-index-item { padding: 8px 0; border-bottom: 1px solid #e8dcc0; }
.poem-index-item:last-child { border-bottom: none; }
.poem-index-title { font: 15px/1.4 Georgia,'Times New Roman',serif; color: #2d2316; text-decoration: none; }
.poem-index-title:hover { color: #3a6b1a; text-decoration: underline; }
.poem-index-title em { color: inherit; font-style: italic; }
.poem-index-meta { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; display: block; margin-top: 2px; }
.browse-pagination { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e8dcc0; }
.browse-page-btn { font: 13px 'Courier Prime','Courier New',monospace; color: #3a6b1a; text-decoration: none; padding: 4px 10px; border: 1px solid #c4a96b; border-radius: 2px; background: #fdf8ed; }
.browse-page-btn:hover { background: #ede0b0; }
.browse-page-disabled { color: #c4a96b; border-color: #e8dcc0; cursor: default; }
.browse-page-info { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; }
/* ── Phase 1.8: Featured ─────────────────────────────────────────────────── */
.featured-section { margin-bottom: 32px; }
.featured-section-head { margin-bottom: 10px; }
.featured-empty { font: italic 13px Georgia,serif; color: #a08060; }
.featured-browse-link { margin-top: 24px; font: 13px 'Courier Prime','Courier New',monospace; }
.featured-browse-link a { color: #3a6b1a; }
.featured-poem { padding: 14px 0; border-bottom: 1px solid #ddd0b0; }
.featured-poem:last-child { border-bottom: none; }
.featured-poem-title { margin: 0 0 6px; font: normal 1.1rem 'Abril Fatface',Georgia,serif; }
.featured-poem-title a { color: #2d2316; text-decoration: none; }
.featured-poem-title a:hover { color: #3a6b1a; }
.featured-poem-body { margin: 4px 0 8px; }
.featured-poem-meta { margin: 0; font: 12px 'Courier Prime','Courier New',monospace; color: #7a6040; }
.featured-poem-meta a { color: #3a6b1a; }
/* Fancy mode overrides for featured poems (dark panel) */
body.view-fancy .featured-poem { border-bottom-color: rgba(196,169,107,0.3); }
body.view-fancy .featured-poem-title a { color: #fdf8f0; }
body.view-fancy .featured-poem-title a:hover { color: #c8e8a0; }
body.view-fancy .featured-poem-meta { color: #c8b888; }
body.view-fancy .featured-poem-meta a { color: #c8e8a0; }
body.view-fancy .featured-empty,
body.view-fancy .featured-section-head { color: #e8d5b0; }
/* ── Phase 1.8: Admin tag editor (poem page) ─────────────────────────────── */
.poem-admin-tags { border-top: 1px dashed #c4a96b; margin-top: 8px; padding-top: 8px; }
.poem-tag-group-admin .poem-tag-cat { color: #7a5030; }
.poem-tag-admin { background: #f5eedc; border-color: #b09050; color: #5a3a10; cursor: default; }
.tag-admin-badge { font: 10px 'Courier Prime','Courier New',monospace; background: #e8d8a0; color: #6b5020; border-radius: 2px; padding: 1px 4px; margin-left: 4px; vertical-align: middle; }
.admin-tag-editor { margin-top: 10px; }
.admin-tag-edit-btn { font: 11px 'Courier Prime','Courier New',monospace; color: #6b5430; cursor: pointer; display: inline-block; padding: 2px 8px; border: 1px solid #c4a96b; border-radius: 2px; background: #fdf8ed; list-style: none; user-select: none; }
.admin-tag-edit-btn::-webkit-details-marker { display: none; }
.admin-tag-edit-btn:hover { background: #ede0b0; }
.admin-tag-editor[open] .admin-tag-edit-btn { background: #ede0b0; }
.admin-tag-editor-form { margin-top: 10px; padding: 12px; background: #f5eedc; border: 1px solid #c4a96b; border-radius: 3px; }
.admin-tag-editor-cat { margin-bottom: 10px; }
.admin-tag-editor-cat-label { font: 700 11px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .05em; color: #6b5430; display: block; margin-bottom: 5px; }
.admin-tag-editor-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.admin-tag-check { font: 13px 'Courier Prime','Courier New',monospace; color: #2d2316; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.admin-poem-toolbar { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 8px 12px; background: #f5eedc; border: 1px solid #c4a96b; border-radius: 3px; flex-wrap: wrap; }
.admin-poem-toolbar-label { font: 700 11px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .05em; color: #6b5430; }
.admin-poem-toolbar-btn { font-size: 12px; padding: 3px 10px; }
.admin-poem-status-badge { font: 700 11px 'Courier Prime','Courier New',monospace; background: #c04040; color: #fff; border-radius: 2px; padding: 2px 6px; letter-spacing: .05em; }
.admin-suspended-badge { font: 700 11px 'Courier Prime','Courier New',monospace; background: #c04040; color: #fff; border-radius: 2px; padding: 2px 6px; letter-spacing: .05em; }
/* ── Admin page theme — plain cream bg, no grass, no pushpin ────────────── */
body.admin-page {
background-color: #ede8d8;
background-image: none;
}
body.admin-page .box::before,
body.admin-page .login-box::before { display: none; }
/* ── Admin mobile responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
/* Users table: scrollable block */
.admin-users-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Action cells and inline action rows: allow wrapping */
.admin-td-actions,
.admin-actions { white-space: normal; flex-wrap: wrap; }
/* Threshold form: stack vertically */
.threshold-form { flex-wrap: wrap; }
.threshold-form .threshold-note { width: 100%; margin-top: 4px; }
/* Add-tag inline forms: tighten gap */
.admin-form-inline { gap: 6px; }
.admin-form-inline label { min-width: 0; }
/* User detail rows: wrap label+value */
.user-detail-row { flex-wrap: wrap; gap: 6px; }
.user-detail-label { width: auto; }
/* Queue card head: wrap preview link below meta on narrow screens */
.queue-card-head { flex-wrap: wrap; }
/* ── Category edit head: 3-row stack ──────────────────────────────── */
/* Row 1: full-width name input */
.admin-cat-label-input { flex-basis: 100%; width: 100%; }
/* Row 2: type select + admin-only checkbox (natural flex row) */
.admin-cat-head-type { display: flex; gap: 8px; align-items: center; }
/* Row 3: order + save (natural flex row) */
.admin-cat-head-meta { display: flex; gap: 8px; align-items: center; }
/* ── Reports: card layout instead of 6-column table ──────────────── */
.admin-reports-table thead { display: none; }
.admin-reports-table,
.admin-reports-table tbody,
.admin-reports-table tr { display: block; }
.admin-reports-table tr {
border: 1px solid #d4c490;
border-radius: 4px;
padding: 10px 12px;
margin-bottom: 10px;
background: #fdfaf2;
}
.admin-reports-table td {
display: block;
border: none;
padding: 2px 0;
font-size: 13px;
}
.admin-reports-table .admin-report-reason {
color: #3a2e18;
padding: 4px 0;
border-top: 1px solid #e8dcc0;
border-bottom: 1px solid #e8dcc0;
margin: 4px 0;
}
.admin-reports-table .admin-nowrap { white-space: normal; color: #7a6a3a; font-size: 12px; display: inline; }
.admin-reports-table .admin-actions { padding-top: 6px; }
/* Hide reporter IP on mobile to save space */
.admin-reports-table .admin-row-inactive { opacity: .6; }
}
/* ── Phase 1.8: Admin featured page ─────────────────────────────────────── */
.admin-featured-page { max-width: 820px; }
.admin-section { margin-bottom: 8px; }
.admin-hint { font: italic 11px 'Courier Prime','Courier New',monospace; color: #a08060; }
.admin-table { width: 100%; border-collapse: collapse; font: 13px 'Courier Prime','Courier New',monospace; margin-bottom: 16px; }
.admin-table th { text-align: left; font-weight: 700; padding: 6px 8px; border-bottom: 2px solid #c4a96b; color: #6b5430; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.admin-table td { padding: 6px 8px; border-bottom: 1px solid #e8dcc0; vertical-align: middle; }
.admin-row-inactive td { opacity: .5; }
.admin-td-meta { color: #6b5430; font-size: 12px; }
.admin-td-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.admin-input { font: 13px 'Courier Prime','Courier New',monospace; border: 1px solid #c4a96b; background: #fdf8ed; padding: 3px 6px; border-radius: 2px; width: 100%; box-sizing: border-box; }
.admin-input-narrow { width: 64px; }
.admin-select { font: 13px 'Courier Prime','Courier New',monospace; border: 1px solid #c4a96b; background: #fdf8ed; padding: 3px 6px; border-radius: 2px; }
.admin-select-sm { font: 12px 'Courier Prime','Courier New',monospace; border: 1px solid #c4a96b; background: #fdf8ed; padding: 2px 4px; border-radius: 2px; }
.admin-slug { font: 11px 'Courier Prime','Courier New',monospace; background: #f0ead8; padding: 1px 4px; border-radius: 2px; color: #6b5430; }
.admin-form-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px; background: #f5eedc; border: 1px solid #c4a96b; border-radius: 3px; margin-top: 8px; }
.admin-form-inline label { display: flex; flex-direction: column; gap: 3px; font: 11px 'Courier Prime','Courier New',monospace; color: #6b5430; text-transform: uppercase; letter-spacing: .04em; }
.admin-form-compact { padding: 8px 10px; }
.admin-cat-block { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid #e8dcc0; }
.admin-cat-block:last-child { border-bottom: none; }
.admin-cat-head { margin-bottom: 6px; }
.admin-tag-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.admin-tag-item { font: 12px 'Courier Prime','Courier New',monospace; color: #2d2316; }
.btn-danger { font: 12px 'Courier Prime','Courier New',monospace; background: #f5e8e0; border: 1px solid #c08060; border-radius: 2px; padding: 3px 8px; cursor: pointer; color: #7a2020; box-shadow: 1px 1px 0 #a06040; }
.btn-danger:hover { background: #eecfbf; }
.btn-danger:active { transform: translate(1px,1px); box-shadow: none; }
/* ── Phase 1.4: Admin tag management ────────────────────────────────────── */
.btn-warn { font: 12px 'Courier Prime','Courier New',monospace; background: #fdf3d0; border: 1px solid #c4a030; border-radius: 2px; padding: 3px 8px; cursor: pointer; color: #7a5800; box-shadow: 1px 1px 0 #a07820; }
.btn-warn:hover { background: #f5e5a0; }
.btn-warn:active { transform: translate(1px,1px); box-shadow: none; }
.btn-sm { font-size: 11px; padding: 2px 7px; }
.admin-section-alert { background: #fdf8ed; border: 1px solid #c4a96b; border-radius: 3px; padding: 12px 16px; margin-bottom: 16px; }
.admin-section-alert h2 { margin-top: 0; }
.admin-badge-count { display: inline-block; font: 700 11px 'Courier Prime','Courier New',monospace; background: #c4a030; color: #fff; border-radius: 10px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.admin-cat-edit-form { margin-bottom: 8px; }
.admin-cat-head-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.admin-cat-label-input { width: 100%; flex-basis: 100%; }
.admin-cat-head-type,
.admin-cat-head-meta { display: flex; align-items: center; gap: 6px; }
.admin-inline-label { font: 12px 'Courier Prime','Courier New',monospace; color: #6b5430; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.admin-cat-delete-form { display: inline; margin-left: 8px; }
/* ── Tag click-to-edit list ───────────────────────────────────────────── */
.tag-edit-list { list-style: none; padding: 0; margin: 0 0 8px; }
.tag-edit-item { border-bottom: 1px solid #e8dcc0; padding: 5px 0; }
.tag-edit-item:last-child { border-bottom: none; }
.tag-edit-item.tag-inactive .tag-label-btn { color: #a08060; }
.tag-display { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.tag-label-btn { background: none; border: none; padding: 0; font: 13px 'Courier Prime','Courier New',monospace; color: #2d2316; cursor: pointer; text-align: left; text-decoration: underline dotted; text-underline-offset: 3px; }
.tag-label-btn:hover { color: #7a4a18; }
.tag-status-pill { font: 11px 'Courier Prime','Courier New',monospace; color: #fff; background: #a08060; border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.tag-delete-btn { background: none; border: none; color: #c06050; font: 16px/1 'Courier Prime','Courier New',monospace; cursor: pointer; padding: 0 2px; margin-left: auto; opacity: 0.5; }
.tag-delete-btn:hover { opacity: 1; }
.tag-edit { padding: 4px 0 6px; }
.tag-edit-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.tag-edit-input { flex: 1; min-width: 120px; }
.tag-edit-actions { display: flex; gap: 4px; }
.tag-add-row { margin-top: 4px; }
.tag-add-form { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
/* ── Phase 1.14 + 1.15 + 1.19 shared: page-level elements ───────────────── */
/* Pages sit on the grass field in all non-Reader modes — use cream text + shadow for legibility */
h1.page-title {
font: normal 26px/1.2 'Abril Fatface',Georgia,serif; margin-bottom: 6px;
color: #fdf8f0;
text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
}
.page-desc { font: 14px/1.6 Georgia,'Times New Roman',serif; color: #e8d5b0; text-shadow: 0 1px 2px rgba(0,0,0,.35); margin-bottom: 20px; }
.btn-pri { font: 13px 'Courier Prime','Courier New',monospace; background: #3a6b1a; border: 1px solid #2a5010; border-radius: 2px; padding: 5px 14px; cursor: pointer; color: #fdf8ed; box-shadow: 1px 1px 0 #1a3a08; }
.btn-pri:hover { background: #4a7f22; }
.btn-pri:active { transform: translate(1px,1px); box-shadow: none; }
/* ── View-mode fixes: Fancy panels + field-text legibility ───────────────────
Plain cream cards are handled above via the broad .text-page rule. */
/* Plain: page-title + page-desc go dark inside cream cards
(those classes are cream by default for the grass field; inside a card they'd
be invisible without this override). */
body.view-plain h1.page-title { color: #2d2316; text-shadow: none; }
body.view-plain .page-desc { color: #6b5430; text-shadow: none; }
/* Fancy: profile + drafts become dark inverted-note panels (same treatment as
the tags / footer panels on poem permalinks). */
body.view-fancy .profile-page,
body.view-fancy .drafts-page {
background: rgba(38, 29, 18, 0.86);
border: 1px solid rgba(196, 169, 107, 0.95);
border-radius: 3px;
color: #e8d5b0;
padding: 24px 28px; margin: 24px auto;
}
/* Profile: name is the primary heading — floats cream, haloed */
body.view-fancy .profile-name {
color: #fdf8f0;
text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
}
/* Profile: secondary text inherits warm-cream from panel; named overrides for
elements that set their own colour in the base rules. */
body.view-fancy .profile-slug,
body.view-fancy .profile-joined,
body.view-fancy .profile-section-head,
body.view-fancy .profile-no-bio,
body.view-fancy .profile-no-poems,
body.view-fancy .profile-poem-meta { color: #e8d5b0; }
/* Drafts: h1 (no .page-title class) gets the haloed heading treatment */
body.view-fancy .drafts-page h1 {
color: #fdf8f0;
text-shadow: 0 1px 1px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.5);
}
/* .text-page p and .text-page li set explicit colour (#2d2316) that beats
the inherited panel colour. Override them here so body text inside the dark
panels stays warm-cream. Named element overrides above have higher specificity
still and cascade on top correctly. */
body.view-fancy .profile-page p,
body.view-fancy .profile-page li,
body.view-fancy .drafts-page p,
body.view-fancy .drafts-page li { color: #e8d5b0; }
/* Links inside the dark panels — light green, readable against dark bg */
body.view-fancy .profile-page a:not(.btn-sec):not(.btn-pri):not(.btn-primary) { color: #c8e8a0; }
body.view-fancy .drafts-page a:not(.btn-sec):not(.btn-pri) { color: #c8e8a0; }
/* Internal borders inside dark panels — warm gold hairlines */
body.view-fancy .profile-header { border-bottom-color: rgba(196,169,107,0.4); }
body.view-fancy .profile-poem-item { border-bottom-color: rgba(196,169,107,0.3); }
/* Fancy: Saved Poems list — light text on grass (no panel; consistent with the
chip-page treatment where chips float bare on the field). */
body.view-fancy .collection-poem-title { color: #c8e8a0; }
body.view-fancy .collection-meta { color: #e8d5b0; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
body.view-fancy .collection-meta a { color: #c8e8a0; }
body.view-fancy .collection-item { border-bottom-color: rgba(196,169,107,0.3); }
body.view-fancy .collection-remove-btn { color: #e8d5b0; }
body.view-fancy .collection-remove-btn:hover { color: #fdf8f0; }
/* ── Phase 1.14: poem report ─────────────────────────────────────────────── */
.poem-action-btns { display: flex; gap: 6px; align-items: center; margin-left: 8px; }
.poem-ribbon-btn { font: 18px/1 serif; background: none; border: 1px solid transparent; border-radius: 2px; padding: 2px 4px; cursor: pointer; opacity: .5; transition: opacity .15s; }
.poem-ribbon-btn:hover, .poem-ribbon-btn[aria-pressed="true"] { opacity: 1; border-color: #c4a96b; }
.poem-ribbon-btn.poem-ribbon-saved { opacity: 1; }
.poem-report-btn { font: 11px 'Courier Prime','Courier New',monospace; background: none; border: 1px solid transparent; border-radius: 2px; padding: 3px 7px; cursor: pointer; color: #a08060; }
.poem-report-btn:hover { border-color: #c4a96b; color: #2d2316; }
.report-form-wrap { margin: 12px 0 0; padding: 14px 18px; background: #f5eedc; border: 1px solid #c4a96b; border-radius: 3px; max-width: 560px; }
.report-form-label { display: block; font: 700 12px 'Courier Prime','Courier New',monospace; color: #6b5430; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.report-form-textarea { width: 100%; box-sizing: border-box; font: 13px/1.5 Georgia,serif; border: 1px solid #c4a96b; background: #fdf8ed; border-radius: 2px; padding: 6px 8px; resize: vertical; }
.report-form-actions { display: flex; gap: 8px; margin-top: 10px; }
.report-form-confirm { font: 13px 'Courier Prime','Courier New',monospace; color: #3a6b1a; margin-top: 8px; }
/* ── Phase 1.15: profile page ────────────────────────────────────────────── */
.profile-page { max-width: 640px; }
.profile-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid #e8dcc0; }
.profile-name { font: 700 28px/1.2 'Playfair Display',Georgia,serif; margin-bottom: 4px; }
.profile-slug { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; margin-bottom: 4px; }
.profile-joined { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; margin-bottom: 12px; }
.profile-links { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.profile-links a { font: 13px 'Courier Prime','Courier New',monospace; color: #3a6b1a; text-decoration: none; }
.profile-links a:hover { text-decoration: underline; }
.profile-edit-link { font: 12px 'Courier Prime','Courier New',monospace; }
.profile-section-head { font: 700 12px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .05em; color: #6b5430; margin: 0 0 10px; }
.profile-bio-section { margin-bottom: 28px; }
.profile-bio-poem { background: #f5eedc; border: 1px solid #c4a96b; border-radius: 3px; padding: 14px 18px; margin-bottom: 8px; }
/* (.bio-line / .horse-chip rules removed 1.12 step 4 — the bio poem renders via
the render_poem macro now (.poem-line-out / .poem-horse), so those were dead.) */
.bio-poem-link { font: 12px 'Courier Prime','Courier New',monospace; margin: 8px 0 0; }
.bio-poem-link a { color: #3a6b1a; }
.profile-no-bio { font: 14px Georgia,serif; color: #a08060; }
.profile-bio-actions { display: flex; gap: 12px; margin-top: 4px; }
.profile-bio-clear { color: #7a2020; }
.profile-poems-section { margin-bottom: 28px; }
.profile-poem-list { list-style: none; padding: 0; margin: 0; }
.profile-poem-item { padding: 8px 0; border-bottom: 1px solid #e8dcc0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.profile-poem-item:last-child { border-bottom: none; }
.profile-poem-title { font: 14px/1.4 Georgia,serif; color: #3a6b1a; text-decoration: none; flex: 1 1 auto; }
.profile-poem-title:hover { text-decoration: underline; }
.profile-poem-meta { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; white-space: nowrap; }
.profile-no-poems { font: italic 14px Georgia,serif; color: #a08060; }
/* ── Phase 1.15: profile edit ────────────────────────────────────────────── */
.profile-edit-page { max-width: 540px; }
.profile-edit-form { margin-top: 20px; }
.form-field { margin-bottom: 20px; }
.form-label { display: block; font: 700 12px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .04em; color: #6b5430; margin-bottom: 5px; }
.form-hint { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; margin: 0 0 8px; }
.form-input { font: 14px 'Courier Prime','Courier New',monospace; border: 1px solid #c4a96b; background: #fdf8ed; border-radius: 2px; padding: 5px 8px; width: 100%; box-sizing: border-box; }
.form-input:focus { outline: 2px solid #3a6b1a; outline-offset: 1px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 24px; }
.profile-links-field { border: none; padding: 0; margin: 0; }
.profile-links-field legend { font: 700 12px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .04em; color: #6b5430; margin-bottom: 5px; float: left; width: 100%; }
.link-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.link-label-input { width: 140px; flex: 0 0 140px; }
.link-url-input { flex: 1; }
.link-remove-btn { font: 11px 'Courier Prime','Courier New',monospace; color: #a08060; white-space: nowrap; flex-shrink: 0; }
.link-remove-btn:hover { color: #7a2020; }
/* ── Phase 1.15: bio picker modal ────────────────────────────────────────── */
.modal-box { background: #faf5e9; border-radius: 2px; padding: 24px; width: min(520px, 95vw); max-height: 85vh; overflow-y: auto; box-shadow: 2px 3px 16px rgba(0,0,0,.2); position: relative; }
.modal-close { position: absolute; top: 10px; right: 12px; font: 20px/1 'Courier Prime',monospace; background: none; border: none; cursor: pointer; color: #6b5430; padding: 4px 6px; }
.modal-close:hover { color: #2d2316; }
.modal-title { font: 700 18px/1.2 'Playfair Display',Georgia,serif; margin-bottom: 6px; }
.modal-hint { font: 13px Georgia,serif; color: #6b5430; margin-bottom: 14px; }
.bio-picker-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.bio-picker-item { border: 1px solid #e8dcc0; border-radius: 2px; background: #fdf8ed; }
.bio-picker-current { border-color: #3a6b1a; background: #f0f8e8; }
.bio-picker-btn { width: 100%; text-align: left; font: 14px 'Courier Prime','Courier New',monospace; background: none; border: none; padding: 8px 12px; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bio-picker-btn:hover { background: #ede0b0; }
.bio-picker-meta { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; }
.bio-picker-pending { font: 11px 'Courier Prime','Courier New',monospace; color: #a06030; }
.bio-picker-active-label { font: 11px 'Courier Prime','Courier New',monospace; color: #3a6b1a; margin-left: auto; }
/* ── Phase 1.19: collection pages ────────────────────────────────────────── */
.collection-page { max-width: 640px; }
.collection-list { list-style: none; padding: 0; margin: 0 0 10px; }
.collection-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e8dcc0; flex-wrap: wrap; }
.collection-item:last-child { border-bottom: none; }
.collection-horse-name,
.collection-poem-title { font: 14px Georgia,serif; color: #3a6b1a; text-decoration: none; flex: 1 1 auto; }
.collection-horse-name { font-family: 'Courier Prime','Courier New',monospace; }
a.collection-horse-name:hover,
a.collection-poem-title:hover { text-decoration: underline; }
.collection-meta { font: 12px 'Courier Prime','Courier New',monospace; color: #a08060; white-space: nowrap; }
.collection-meta a { color: #6b5430; text-decoration: none; }
.collection-meta a:hover { text-decoration: underline; }
.collection-remove-btn { font: 11px 'Courier Prime','Courier New',monospace; color: #a08060; white-space: nowrap; flex-shrink: 0; }
.collection-remove-btn:hover { color: #7a2020; }
.collection-empty { font: italic 14px Georgia,serif; color: #c8b888; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.collection-count { font: 12px 'Courier Prime','Courier New',monospace; color: #c8b888; text-shadow: 0 1px 2px rgba(0,0,0,.3); margin-top: 8px; }
/* Horse-chip grid layout for pasture + saved-horses pages */
.collection-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 24px 0 8px; }
/* Ensure coat color wins over .text-page a's link color on collection pages */
.collection-chips a.poem-horse { color: var(--fg); }
/* Apply poem-line typography directly to chips — they have no .poem-line-out
wrapper, so the mode-specific font doesn't inherit automatically. */
body.view-reader .collection-chips .poem-horse {
font: 1.35rem/1.7 'IM Fell English', Georgia, serif;
font-variant: small-caps;
letter-spacing: .04em;
}
body.view-plain .collection-chips .poem-horse {
font: 1.05rem/2.0 'IM Fell English', Georgia, serif;
}
.collection-chip-wrap { position: relative; }
.collection-chip-remove {
position: absolute; top: -10px; right: -10px;
background: #7a3520; color: #f5ecd7;
border: none; border-radius: 50%;
width: 20px; height: 20px; line-height: 20px; text-align: center;
font: 700 13px 'Courier Prime',monospace;
cursor: pointer; padding: 0; z-index: 1;
display: none; /* shown on wrap:hover */
}
.collection-chip-wrap:hover .collection-chip-remove { display: block; }
.collection-chip-remove:hover { background: #b84020; }
/* Post-as 3-way chooser (Edit Details + Post modal) */
.post-as-chooser { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.post-as-option { display: flex; align-items: center; gap: 5px; font: 13px 'Courier Prime','Courier New',monospace;
padding: 4px 10px; border: 1px solid #c4a96b; border-radius: 2px; background: #fdf8ed; cursor: pointer; }
.post-as-option:has(input:checked) { background: #ede0b0; border-color: #8a7050; font-weight: 700; }
.post-as-option input[type="radio"] { margin: 0; accent-color: #3a6b1a; }
.post-as-warning { font: italic 12px Georgia,serif; color: #7a3520; margin: 4px 0 8px; padding: 4px 8px; background: #fdf0e0; border-left: 3px solid #c4692a; border-radius: 0 2px 2px 0; }
#draft-pseudo-name-row input,
#modal-pseudo-name-row input { font: 14px 'Courier Prime','Courier New',monospace; border: 1px solid #c4a96b; background: #fdf8ed; border-radius: 2px; padding: 5px 8px; width: 100%; box-sizing: border-box; margin-bottom: 8px; }
/* Post modal attribution row (logged-in summary) */
.modal-post-as-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font: 13px 'Courier Prime','Courier New',monospace; color: #4a3820; }
.modal-post-as-text { flex: 1 1 auto; }
.modal-post-as-change { font-size: 11px; white-space: nowrap; }
.modal-signin-nudge { font: 12px Georgia,serif; color: #8a7050; margin: 6px 0 10px; }
.modal-signin-nudge a { color: #3a6b1a; }
/* Profile edit bio section */
.form-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid #e8dcc0; }
.form-section-head { font: 700 12px 'Courier Prime','Courier New',monospace; text-transform: uppercase; letter-spacing: .04em; color: #6b5430; margin: 0 0 8px; }
.profile-bio-current { font: 14px Georgia,serif; margin-bottom: 10px; }
.profile-bio-current a { color: #3a6b1a; text-decoration: none; }
.profile-bio-current a:hover { text-decoration: underline; }
.form-actions-inline { display: flex; gap: 10px; align-items: center; }
/* ── Phase 1.14: admin report queue ─────────────────────────────────────── */
.admin-reports-page { max-width: 900px; }
.admin-filter-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.admin-filter-label { font: 12px 'Courier Prime','Courier New',monospace; color: #6b5430; text-transform: uppercase; letter-spacing: .04em; }
.admin-filter-btn { font: 12px 'Courier Prime','Courier New',monospace; color: #3a6b1a; text-decoration: none; padding: 3px 8px; border: 1px solid #c4a96b; border-radius: 2px; background: #fdf8ed; }
.admin-filter-btn:hover { background: #ede0b0; }
.admin-filter-active { background: #ede0b0; font-weight: 700; border-color: #8a7050; }
.admin-report-reason { max-width: 320px; font: 13px Georgia,serif; color: #2d2316; }
.admin-nowrap { white-space: nowrap; }
.admin-actions { display: flex; gap: 5px; white-space: nowrap; }
.admin-btn-sm { font-size: 11px; padding: 2px 7px; }
.admin-empty { font: italic 14px Georgia,serif; color: #a08060; }
.admin-missing { font: italic 12px 'Courier Prime','Courier New',monospace; color: #a08060; }