/* Crandore Hub — skin "old school web 1.0"
   Courier everywhere, classic blue links, Win95 bevels.
   Keeps the class names from templates so layout still works. */

html, body {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #000000;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    line-height: 1.35;
}

a              { color: #0000ee; text-decoration: underline; }
a:visited      { color: #551a8b; }
a:active       { color: #ff0000; }

h1, h2, h3, h4 { font-family: "Courier New", Courier, monospace; font-weight: bold; margin: 1em 0 .3em; }
h1             { font-size: 22px; border-bottom: 2px solid #000000; padding-bottom: 2px; }
h2             { font-size: 18px; border-bottom: 1px solid #000000; padding-bottom: 1px; }
h3             { font-size: 15px; }

hr             { border: 0; border-top: 1px solid #000000; margin: 1em 0; }

code, pre      { font-family: "Courier New", Courier, monospace; background: #eeeeee; border: 1px solid #808080; }
code           { padding: 0 3px; font-size: 13px; }
pre            { padding: 6px 8px; font-size: 13px; overflow: auto; }

.topbar        { background: #c0c0c0; border-bottom: 2px solid #000000; padding: 6px 10px; }
.topbar .brand { font-weight: bold; font-size: 16px; color: #000000; text-decoration: none; margin-right: 20px; }
.topbar .brand::before { content: ">> "; }
.topbar .brand::after  { content: " <<"; }

.search        { display: inline; }
.search input  {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    background: #ffffff;
    color: #000000;
    border: 2px inset #c0c0c0;
    padding: 2px 4px;
    width: 260px;
}
.search.big input { width: 360px; font-size: 15px; }

.container     { max-width: 900px; margin: 0 auto; padding: 16px 20px 40px; }

.hero          { margin: 8px 0 16px; }
.hero h1       { margin-top: 0; }
.lead          { font-size: 14px; color: #000000; font-style: italic; }
.stats         { margin: 6px 0; }
.stats b       { color: #000000; }

.grid {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid #000000;
    margin: 8px 0;
    background: #ffffff;
}
.grid th, .grid td {
    border: 1px solid #000000;
    padding: 3px 6px;
    text-align: left;
    font-size: 13px;
    vertical-align: top;
}
.grid th       { background: #c0c0c0; font-weight: bold; }
.grid tr:hover td { background: #ffffcc; }

.empty         { text-align: center; padding: 16px; font-style: italic; }
.crumbs        { margin-bottom: 6px; font-size: 13px; }
.crumbs::before{ content: "[path] "; }

.snippet       { background: #ffffff; border: 2px solid #000000; padding: 8px 10px; margin: 12px 0; }
.snippet h3    { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; }
.snippet pre   { margin: 0; background: #ffffe0; border: 1px solid #808080; }

.deps          { display: block; margin-top: 8px; }
.deps section  {
    display: inline-block;
    vertical-align: top;
    background: #ffffff;
    border: 2px solid #000000;
    padding: 6px 10px;
    margin: 4px 6px 4px 0;
    min-width: 180px;
}
.deps h3       { margin: 0 0 4px; font-size: 12px; text-transform: uppercase; border-bottom: 1px dotted #000000; }
.deps ul       { list-style: square; padding-left: 18px; margin: 0; }
.deps li       { font-size: 13px; padding: 1px 0; }
.cons          { color: #606060; font-size: 11px; }

.readme        { background: #ffffe0; border: 2px solid #000000; padding: 10px; margin: 10px 0; max-height: 600px; overflow: auto; }
.readme pre    { background: transparent; border: 0; padding: 0; white-space: pre-wrap; word-wrap: break-word; }

.auth-card     { max-width: 380px; margin: 40px auto; background: #c0c0c0; border: 2px outset #c0c0c0; padding: 16px; }
.auth-card h1  { margin: 0 0 10px; border-bottom: 1px solid #000000; }
.auth-card form{ display: block; }
.auth-card label { display: block; font-size: 13px; margin: 8px 0 2px; }
.auth-card input {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    width: 100%;
    padding: 3px 5px;
    background: #ffffff;
    color: #000000;
    border: 2px inset #c0c0c0;
}

button, button[type=submit], input[type=submit], .auth-card button {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    font-weight: bold;
    background: #c0c0c0;
    color: #000000;
    border: 2px outset #c0c0c0;
    padding: 3px 12px;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 0;
}
button:active, input[type=submit]:active { border-style: inset; }
button[disabled] { color: #808080; cursor: not-allowed; }

.err           { color: #ff0000; font-weight: bold; }
.muted         { color: #606060; font-size: 13px; }

.log {
    background: #000000;
    color: #00ff00;
    border: 2px inset #c0c0c0;
    padding: 8px;
    max-height: 320px;
    overflow: auto;
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    white-space: pre-wrap;
    min-height: 80px;
}

.status        { display: inline-block; padding: 1px 6px; border: 1px solid #000000; background: #c0c0c0; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.status.success{ background: #c0ffc0; }
.status.error  { background: #ffc0c0; }
.status.running{ background: #ffffc0; }

.badge         { display: inline-block; padding: 0 5px; border: 1px solid #000000; background: #ffffff; font-size: 11px; font-weight: bold; text-transform: uppercase; margin-left: 4px; vertical-align: middle; }
.badge.rolling { background: #ffffc0; }
.badge.pinned  { background: #c0e0ff; }

.hits          { list-style: square; padding-left: 22px; margin: 6px 0; }
.hits li       { padding: 3px 0; border-bottom: 1px dotted #808080; font-size: 14px; }

.foot          { border-top: 2px solid #000000; margin-top: 40px; padding: 8px 10px; background: #c0c0c0; font-size: 11px; text-align: center; }
.foot::before  { content: "-- "; }
.foot::after   { content: " --"; }

.pkg-filter    { margin: 10px 0 6px; display: flex; gap: 6px; align-items: center; }
.pkg-filter input {
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    background: #ffffff;
    color: #000000;
    border: 2px inset #c0c0c0;
    padding: 2px 4px;
    width: 260px;
}

.pager-info    { margin: 4px 0 8px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.pager-btn     { display: inline-block; padding: 2px 8px; border: 2px outset #c0c0c0; background: #c0c0c0; font-weight: bold; text-decoration: none; color: #000000; }
.pager-btn:visited { color: #000000; }
.pager-btn:hover   { background: #d8d8d8; }
.pager-btn:active  { border-style: inset; }
.pager-page    { font-size: 12px; color: #606060; }