/* ============================================================
   app.css — 11 Second Club component styles
   Layout and typography handled by Tailwind CSS.
   This file covers: sprites, widgets, calendar, jQuery UI,
   video player, admin, and legacy component styles only.
   ============================================================ */

/* --- Article body (helpful hints, interviews, news) ---
   Long-form prose polish for article_kind=1/2/3 pages rendered through
   home/articles.php. Target line length ~72ch at 17px body copy with
   1.75 line-height; restores heading visibility for imported 2009-era
   essays whose h3/h4 section breaks were getting lost in the Tailwind
   base. Tailwind v4 couldn't be coaxed into reliable [&_h3]: arbitrary
   variants across this multi-line class attribute, so the component
   lives here as plain CSS.
   ============================================================ */
.article-body {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
    line-height: 1.75;
    color: #E5E7EB; /* gray-200 */
}
.article-body > * + * {
    margin-top: 1.25rem; /* 20px rhythm between top-level children */
}
.article-body h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #E9B753;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.article-body h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #E9B753;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.article-body a {
    color: #E9B753;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.article-body a:hover {
    color: #facc15;
    text-decoration-color: rgba(250, 204, 21, 0.6);
}
.article-body hr {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    height: 0;
}
.article-body blockquote {
    border-left: 4px solid rgba(233, 183, 83, 0.6);
    padding-left: 1.25rem;
    font-style: italic;
    color: #D1D5DB; /* gray-300 */
}
.article-body ul {
    list-style: disc;
    padding-left: 1.5rem;
}
.article-body ol {
    list-style: decimal;
    padding-left: 1.5rem;
}
.article-body li {
    margin-bottom: 0.25rem;
}
.article-body pre {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.375rem;
    padding: 0.9rem 1rem;
    margin: 1.25rem 0;
    white-space: pre;
    overflow-x: auto;
    position: relative;
}
.article-body pre code {
    font: inherit;
    color: #e5e7eb;
    background: transparent;
    padding: 0;
}
.article-body :not(pre) > code {
    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
    font-size: 0.85em;
    padding: 0.1em 0.35em;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0.25rem;
    color: #fcd34d;
}
.article-body pre .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font: 600 0.7rem/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
    padding: 0.3rem 0.55rem;
    background: rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.article-body pre:hover .copy-btn,
.article-body pre .copy-btn:focus-visible {
    opacity: 1;
}
.article-body pre .copy-btn:hover {
    background: rgba(252, 211, 77, 0.2);
    color: #fcd34d;
}
.article-body pre .copy-btn.copied {
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
}
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
    margin: 1.5rem auto;
    display: block;
}
.article-body center {
    display: block;
    margin: 1.5rem 0;
    text-align: center;
}
.article-body table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* --- Minimal base (non-conflicting with Tailwind) --- */
strong { font-weight: bold; }
em, dfn { font-style: italic; }
a { text-decoration: none; outline: none; transition: color 0.2s ease; color: #E9B753; }
a:hover { color: #facc15; }
/* Button links: Tailwind text color must override default gold */
a[class*="bg-11sc-gold"] { color: #353535 !important; }
a[class*="bg-11sc-red"] { color: #fff !important; }
a[class*="bg-gray-"] { color: #fff !important; }
a[class*="bg-red-"] { color: #fff !important; }
/* Footer sits on a light-grey background where gold fails the
   readability test — use brand red on a darker hover for contrast. */
footer a { color: #8A070B; }
footer a:hover { color: #353535; }
a img { border: none; }
hr { background: #d8d8d8; color: #d8d8d8; width: 100%; height: 2px; margin: 8px 0; padding: 0; border: none; }
::selection { background: #E9B753; color: #1a1a1a; }
::-moz-selection { background: #E9B753; color: #1a1a1a; }

/* --- Film Strip Winner Thumbnails --- */
#winner_1, #winner_2, #winner_3, #winner_4, #winner_5, #winner_6 { transform: scale(0.82); }
#winner_1 { left: 430px; top: 99px; width: 38px; height: 70px; }
#winner_2 { left: 442px; top: 84px; width: 70px; height: 85px; }
#winner_3 { left: 484px; top: 63px; width: 112px; height: 100px; }
#winner_4 { left: 566px; top: 35px; width: 160px; height: 118px; }
#winner_5 { left: 693px; top: 7px; width: 195px; height: 128px; }
#winner_6 { left: 856px; top: -12px; width: 110px; height: 120px; }

/* --- Scrollbar (webkit) --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #3a3a3a; }
::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* --- Error/Notice/Success Boxes --- */
.error, .notice, .success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; border-radius: 4px; }
.error { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a { color: #8a1f11; }
.notice a { color: #514721; }
.success a { color: #264409; }
.error p, .error li { color: #C20000; }

/* --- Star Ratings --- */
.empty_stars {
	background-image: url(/images/stars_empty.png);
	background-repeat: no-repeat;
	margin: 5px auto -12px;
	width: 565px; height: 45px;
	position: relative; text-align: left;
	transform: scale(0.6);
	transform-origin: center top;
}
.full_stars {
	background-image: url(/images/stars_filled.png);
	background-repeat: no-repeat;
	height: 45px; position: relative; text-align: left;
}
#rating_content { height: 32px; padding-bottom: 8px; }
#rating_track { width: 396px; height: 35px; background-image: url(/css/images/22star.gif); }
#rating_handle { width: 36px; height: 35px; }
.rating_text p { text-align: center; color: #bebebe; font-size: 0.9em; margin-bottom: 0; }
.rating_text strong { color: #ffffff; font-weight: normal; }

/* --- Badge Sprites --- */
.badge_small {
	display: inline-block;
	background-image: url(/images/badges/badges_small.png);
	background-repeat: no-repeat;
	height: 27px; width: 23px;
}
.badge_small.rank_1 { background-position: 0px; }
.badge_small.rank_2 { background-position: -25px; }
.badge_small.rank_3 { background-position: -50px; }
.badge_small.rank_11 { background-position: -75px; }
.badge_small.rank_20 { background-position: -100px; width: 20px; }
.badge_small.rank_50 { background-position: -125px; width: 20px; }
.badge_small.rank_100 { background-position: -150px; width: 20px; }
.badge_small.rank_all { background-position: -177px; width: 15px; }
.badge_small.rank_ff { background-position: -200px; width: 18px; }

.badge_medium {
	display: inline-block;
	background-image: url(/images/badges/badges_medium.png);
	background-repeat: no-repeat;
	height: 39px; width: 36px;
}
.badge_medium.rank_1 { background-position: 0px; }
.badge_medium.rank_2 { background-position: -38px; }
.badge_medium.rank_3 { background-position: -76px; }
.badge_medium.rank_11 { background-position: -114px; }
.badge_medium.rank_20 { background-position: -152px; width: 30px; }
.badge_medium.rank_50 { background-position: -190px; width: 30px; }
.badge_medium.rank_100 { background-position: -228px; width: 30px; }
.badge_medium.rank_all { background-position: -268px; width: 23px; }

.badge_large {
	display: inline-block;
	background-image: url(/images/badges/badges_large.png);
	background-repeat: no-repeat;
	height: 85px; width: 67px;
}
.badge_large.rank_1 { background-position: 0px; }
.badge_large.rank_2 { background-position: -68px; }
.badge_large.rank_3 { background-position: -136px; }
.badge_large.rank_11 { background-position: -204px; }
.badge_large.rank_20 { background-position: -272px; }
.badge_large.rank_50 { background-position: -340px; }
.badge_large.rank_100 { background-position: -408px; }
.badge_large.rank_all { background-position: -486px; width: 43px; }

.badge_first {
	position: absolute;
	background-image: url(/css/images/first_place_ribbon.png);
	top: 75px; left: 15px; width: 71px; height: 79px;
}
.badge_first a { display: block; width: 100%; height: 100%; }
.badge_first_small {
	background-image: url(/css/images/first_place_ribbon_small.png);
	width: 30px; height: 31px;
}
.badge_first_small a { display: block; width: 100%; height: 100%; }

.badge_large, .badge_medium, .badge_small { transition: transform 0.2s ease; }
.badge_large:hover, .badge_medium:hover { transform: scale(1.1); }

/* --- Dropdown Menu (archive subnav) --- */
.ddmenu { list-style: none; padding: 0; margin: 0; }
.ddmenu > li { float: left; }
.ddmenu > li > a { display: block; }
.ddmenu > li ul {
	display: none; width: 110px; list-style: none;
	position: absolute; margin: 6px 0 0 15px; z-index: 90; padding: 0;
}
.ddmenu > li ul a {
	display: block; width: 100px; padding: 5px;
	color: #fff; background-color: #494949;
	transition: background-color 0.15s ease; border-radius: 2px;
}
.ddmenu > li ul a:hover { background-color: #5a5a5a; }

/* --- Calendar/DatePicker --- */
table.jCalendar { border-collapse: separate; border-spacing: 1px; table-layout: fixed; }
table.jCalendar th { background: #bebebe; color: #000; width: 39px; font-weight: bold; padding: 0; text-align: center; }
table.jCalendar td { background: url(/images/calendar_white_bkg.png) no-repeat; width: 40px; height: 24px; color: #000; padding: 0px 5px; text-align: right; }
table.jCalendar td.other-month { background: none; }
table.jCalendar td.today { background: url(/images/calendar_yellow_bkg.png) no-repeat; }
table.jCalendar td.current-month.deadline { background: url(/images/calendar_red_bkg.png) no-repeat; color: #fff; }
table.jCalendar td.past { background: url(/images/calendar_gray_bkg.png) no-repeat; color: #898989; }
table.jCalendar td.selected { background: #f66; color: #fff; }
table.jCalendar td.selected.dp-hover { background: #f33; color: #fff; }
table.jCalendar td.dp-hover, table.jCalendar tr.activeWeekHover td { background: #fff; color: #000; }
table.jCalendar tr.selectedWeek td { background: #f66; color: #fff; }
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover { background: #bbb; color: #888; }

div.dp-popup { position: relative; background: #ccc; font-size: 10px; font-family: arial, sans-serif; padding: 2px; width: 171px; line-height: 1.2em; }
div#dp-popup { position: absolute; z-index: 199; }
div.dp-popup h2 { font-size: 12px; text-align: center; margin: 2px 0; padding: 0; }
a#dp-close { font-size: 11px; padding: 4px 0; text-align: center; display: block; }

/* --- jQuery UI Dialog Overrides --- */
#dialog { display: none; }
.ui-dialog {
	width: 428px; background-color: #000000; background-repeat: no-repeat;
	padding: 4px; border: 4px #fff solid; text-align: left; color: #fff;
	border-radius: 6px;
}
.ui-dialog span.ui-dialog-title { display: none; }
.ui-dialog .ui-icon-closethick {
	position: absolute; top: -12px; right: -12px; display: block;
	background-image: url(/css/images/close-button.png); width: 24px; height: 24px;
}
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
.ui-widget-shadow { margin: -11px 0 0 -11px; padding: 11px; background: #2d2d2d; opacity: .90; border-radius: 11px; }
.ui-corner-all { border-radius: 11px; }
.ui-corner-all-small { border-radius: 3px; }

/* --- Theatre/Voting Layout --- */
#theatre { background-color: #4b4b4b; }
.entry_video_player { margin-bottom: 20px; }

/* --- Link-style Button --- */
.link-button {
	background: none; border: none; color: #E9B753; cursor: pointer;
	padding: 0; font: inherit; text-decoration: underline;
}
.link-button:hover { color: #f0c96a; }

/* --- Video player controls — single row layout --- */
.controller_container {
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap;
}
.controller_container .control { flex-shrink: 0; }
.controller_container .track_container {
	flex: 1 1 auto;
	min-width: 80px;
	margin-left: 6px !important;
	margin-right: 6px !important;
}
.controller_container input.frame_counter {
	width: 48px !important;
	margin-right: 4px !important;
}
.controller_container .next_frame { margin-right: 4px !important; }

/* Frame counter — dark theme */
input.frame_counter {
	background-image: none !important;
	background-color: #2a2a2a !important;
	border: 1px solid #444 !important;
	border-radius: 4px;
	color: #fff;
	font-weight: 600;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
input.frame_counter:focus {
	border-color: #c8a24e !important;
	outline: none;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.4), 0 0 4px rgba(200,162,78,0.3);
}

/* --- Subnav Play button --- */
#subnav button {
	background: #333;
	color: #fff;
	border: 1px solid #555;
	padding: 3px 12px;
	cursor: pointer;
	font-size: 0.85em;
	border-radius: 4px;
}
#subnav button:hover {
	background: #444;
	border-color: #777;
}

/* --- Admin (not migrated to Tailwind) --- */
.admin {
	margin-top: 5px; margin-left: 40px;
	min-height: 240px; height: auto !important;
	width: 880px; padding-bottom: 0px;
	line-height: 1.2em; font-size: 1.1em; font-weight: bold;
}
.admin input[type=text] { width: 200px; }
.admin textarea { width: 300px; height: 300px; }
.admin_label { padding-top: 5px; margin-right: 5px; }
.admin textarea.short { height: 110px; }

/* HACK hide PHP errors from users */
div[style="border:1px solid #990000;padding-left:20px;margin:0 0 10px 0;"] { display: none; }