/* Lessboard base CSS - all values use CSS variables from theme.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    background: var(--background);
    color: var(--text);
}

a {
    color: var(--link);
    text-decoration: none;
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    text-decoration: underline;
}

/* Header */
#header {
    background: var(--header-background);
    padding: 2px;
}

#header table {
    width: var(--content-width);
    margin: 0 auto;
    padding: 2px;
}

#header td {
    vertical-align: middle;
}

#header .logo {
    border: 1px solid var(--header-text);
    padding: 2px;
    font-weight: bold;
    color: var(--header-text);
    background: var(--header-background);
}

#header .logo a {
    color: var(--header-text);
}

#header .logo .site-icon {
    width: var(--tile-size-inline);
    height: var(--tile-size-inline);
    vertical-align: middle;
    margin-right: 4px;
    border: 1px solid var(--header-text);
}

#header .pagetop {
    font-size: var(--font-size);
    color: var(--header-text);
}

#header .pagetop a {
    color: var(--header-text);
}

#header .pagetop a:visited {
    color: var(--header-text);
}

/* Main content area */
.content {
    width: var(--content-width);
    margin: 0 auto;
    background: var(--content-background);
}

/* Content with sidebar - uses CSS Grid for reliable column layout */
.content-with-sidebar {
    width: var(--content-width);
    margin: 0 auto;
    background: var(--content-background);
    display: grid;
    grid-template-columns: 1fr var(--sidebar-width);
    gap: 20px;
}

.content-with-sidebar.sidebar-left {
    grid-template-columns: var(--sidebar-width) 1fr;
}

.content-with-sidebar .main-content {
    min-width: 0;
    background: var(--content-background);
}

.content-with-sidebar.sidebar-left .main-content {
    grid-column: 2;
}

.content-with-sidebar.sidebar-left .sidebar {
    grid-column: 1;
    grid-row: 1;
}

.content-with-sidebar .sidebar {
    background: var(--sidebar-background);
    border: 1px solid var(--sidebar-border-color);
    padding: var(--sidebar-padding);
    font-size: var(--sidebar-font-size);
    color: var(--sidebar-text-color);
    overflow: hidden;
}

.content-with-sidebar .sidebar ul,
.content-with-sidebar .sidebar ol {
    list-style-position: inside;
    padding-left: 0;
    margin: 0.5em 0;
}

.content-with-sidebar .sidebar li {
    list-style-position: inside;
}

.content-with-sidebar .sidebar a {
    color: var(--sidebar-link-color);
}

.content-with-sidebar .sidebar a:visited {
    color: var(--sidebar-link-color);
}

.content-with-sidebar .sidebar img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }
    .content-with-sidebar.sidebar-left .main-content,
    .content-with-sidebar.sidebar-left .sidebar {
        grid-column: 1;
    }
    .content-with-sidebar .sidebar {
        grid-row: auto;
    }
}

/* Post list table */
.itemlist {
    width: 100%;
    border-spacing: 0;
}

.itemlist .athing {
    background: var(--content-background);
}

.itemlist td {
    padding: 0;
    vertical-align: top;
}

.rank {
    text-align: right;
    padding-right: var(--spacing);
    color: var(--meta-color);
    font-size: var(--font-size);
    width: 30px;
}

.votelinks {
    text-align: center;
    width: 15px;
}

.votearrow {
    width: 10px;
    height: 10px;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23828282' d='M5 0L10 10H0z'/%3E%3C/svg%3E") no-repeat center;
    display: inline-block;
    border: none;
    padding: 0;
    background-color: transparent;
}

.votearrow:hover {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23ff6600' d='M5 0L10 10H0z'/%3E%3C/svg%3E") no-repeat center;
}

.title {
    font-size: var(--font-size);
    padding-top: 1px;
}

.titleline {
    font-size: var(--font-size);
}

.titleline a {
    color: var(--title-color);
}

.titleline a:visited {
    color: var(--title-visited);
}

.sitebit {
    font-size: var(--font-size-small);
    color: var(--meta-color);
}

.pinned-badge {
    display: inline-block;
    font-size: var(--font-size-meta);
    background: var(--pinned-color);
    color: var(--pinned-text);
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: lowercase;
    vertical-align: middle;
    margin-right: 4px;
}

.sitebit a {
    color: var(--meta-color);
}

.subtext {
    font-size: var(--font-size-meta);
    color: var(--meta-color);
    padding-left: 4px;
}

.subtext a {
    color: var(--meta-color);
}

.subtext a:hover {
    text-decoration: underline;
}

.score {
    color: var(--meta-color);
}

.spacer {
    height: var(--spacing);
}

/* More link */
.morelink {
    padding: 10px 0;
    font-size: var(--font-size);
}

.morelink a {
    color: var(--link);
}

/* Footer */
#footer {
    border-top: 2px solid var(--header-background);
    padding: 10px 0;
    margin-top: 20px;
    text-align: center;
    width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

#footer .yclinks {
    font-size: var(--font-size-small);
    color: var(--meta-color);
}

#footer .yclinks a {
    color: var(--meta-color);
}

/* Forms */
.form-container {
    width: var(--content-width);
    margin: 10px auto;
    padding: 10px 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
textarea,
select {
    font-family: var(--font-mono);
    font-size: var(--font-size);
    border: 1px solid var(--border-color);
    padding: 2px;
}

textarea {
    width: var(--input-width);
    height: 100px;
}

input[type="submit"],
button[type="submit"] {
    font-family: var(--font-family);
    font-size: var(--font-size);
    cursor: pointer;
}

/* Comment page */
.comment-tree {
    font-size: var(--font-size);
}

.comment {
    margin-bottom: 15px;
}

.comhead {
    font-size: var(--font-size-small);
    color: var(--meta-color);
}

.comhead a {
    color: var(--meta-color);
}

.commtext {
    margin-top: var(--spacing);
    overflow-wrap: break-word;
}

.commtext p {
    margin: 8px 0;
}

.commtext a {
    color: var(--link);
}

.commtext code {
    white-space: pre-wrap;
}

.reply {
    font-size: var(--font-size-small);
    margin-top: var(--spacing);
}

.reply a {
    color: var(--meta-color);
    text-decoration: underline;
}

/* Indent for nested comments */
.ind {
    display: inline-block;
}

/* Categories nav */
.categories {
    padding: var(--spacing) 0;
    font-size: var(--font-size);
    border-bottom: 1px solid var(--header-background);
    margin-bottom: 10px;
}

.categories a {
    margin-right: 10px;
    color: var(--link);
}

/* Error */
.error {
    color: var(--error-color);
    font-size: var(--font-size);
    padding: 10px 0;
}

/* Link button */
.link-button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: none;
}

.link-button:hover {
    text-decoration: underline;
}

/* Admin/mod tables */
table.admin {
    border-collapse: collapse;
    font-size: var(--font-size);
}

table.admin td, table.admin th {
    padding: 3px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

/* Hide stuff */
.hidden {
    display: none;
}

/* Post detail page */
.fatitem {
    margin-bottom: 10px;
}

.fatitem .title {
    font-size: var(--font-size);
}

.fatitem .subtext {
    font-size: var(--font-size-small);
}

/* User profile */
.profile-table td {
    padding: 2px var(--spacing);
    vertical-align: top;
    font-size: var(--font-size);
}

.profile-table td:first-child {
    color: var(--meta-color);
    text-align: right;
    width: 80px;
}

/* Inline tiles - 1:1 with 16x16 source */
.inline-tile {
    width: var(--tile-size-inline);
    height: var(--tile-size-inline);
    vertical-align: middle;
    margin-right: 2px;
}

/* Profile page tile */
.profile-tile {
    width: var(--tile-size-profile);
    height: var(--tile-size-profile);
    vertical-align: middle;
    image-rendering: pixelated;
    margin-right: 5px;
}

/* Settings page tile */
.settings-tile {
    width: var(--tile-size-settings);
    height: var(--tile-size-settings);
    image-rendering: pixelated;
}

/* Success message */
.success-message {
    color: var(--success-color);
}