/* tty — multi-color terminal theme for kiki */

@font-face {
    font-family: tty;
    src: url('TerminusTTF.ttf');
    font-weight: normal;
}
@font-face {
    font-family: tty;
    src: url('TerminusTTF-Bold.ttf');
    font-weight: bold;
}

:root {
    /* Base */
    --bg:           #0d0d0d;
    --fg:           #39e839;      /* body text — classic green */
    --fg-dim:       #1a8a1a;      /* dimmed green */
    --fg-muted:     #0f4a0f;      /* very dim — decorative */

    /* Cyan — headings, commands, structural */
    --cyan:         #5ffbff;
    --cyan-dim:     #1a7a7a;
    --cyan-muted:   #0d3a3a;

    /* Yellow — prompts, verbs */
    --yellow:       #ffff55;
    --yellow-dim:   #7a7a1a;

    /* Magenta — post borders, title bar accent */
    --magenta:      #ff66ff;
    --magenta-dim:  #6a1a6a;

    /* Amber — links, dates, metadata */
    --amber:        #ffaa33;
    --amber-dim:    #7a4a0a;

    /* Title bar */
    --bar-bg:       #0a2020;
    --bar-fg:       #5ffbff;
    --bar-border:   #1a5a5a;

    /* Borders */
    --border:       #1a3a1a;
}

/* ---- Reset / Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: tty, 'Courier New', monospace;
    font-size: 18px;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

/* ---- Terminal window container ---- */
#container {
    max-width: 900px;
    margin: 1.2em auto;
    border: 1px solid var(--bar-border);
}

/* ---- Title bar — dark teal with cyan text ---- */
#termbar {
    display: flex;
    align-items: center;
    background: var(--bar-bg);
    color: var(--bar-fg);
    font-size: 14px;
    font-weight: bold;
    padding: 3px 8px;
    gap: 6px;
    border-bottom: 1px solid var(--bar-border);
    user-select: none;
    letter-spacing: 0.05em;
}

.termbar-icon { flex-shrink: 0; font-size: 10px; color: var(--magenta); }
.termbar-title { flex: 1; }

.termbar-controls { display: flex; gap: 3px; flex-shrink: 0; }

.tbtn {
    display: inline-block;
    width: 16px;
    text-align: center;
    border: 1px solid var(--cyan-dim);
    color: var(--cyan-dim);
    font-size: 11px;
    line-height: 15px;
    cursor: default;
}

.tbtn-close { border-color: var(--magenta-dim); color: var(--magenta-dim); }

/* ---- Navigation ---- */
#navmenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 4px 8px;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 10;
}

.nav-prompt {
    color: var(--yellow);
    font-weight: bold;
    margin-right: 6px;
    flex-shrink: 0;
}

/* blinking block cursor after prompt */
.nav-prompt::after {
    content: '\25AE';
    animation: blink 1.2s step-start infinite;
    color: var(--yellow-dim);
    font-size: 13px;
    vertical-align: baseline;
}

@keyframes blink { 50% { opacity: 0; } }

.navmenu-item { display: inline; }

.navmenu-item a,
.navmenu-item span a {
    color: var(--fg) !important;
    text-decoration: none;
    padding: 1px 7px;
    border: 1px solid transparent;
    display: inline-block;
}

.navmenu-item a:hover,
.navmenu-item span a:hover {
    background: var(--cyan);
    color: var(--bg) !important;
}

.navmenu-item a:visited,
.navmenu-item span a:visited { color: var(--fg) !important; }

.separator { display: none; }

/* ---- Content area ---- */
#content { padding: 0.7em 1.1em 1.2em; }

/* ---- Command line — page title as $ cat "..." ---- */
.term-cmd {
    padding: 5px 0 7px;
    border-bottom: 1px dashed var(--fg-muted);
    margin-bottom: 12px;
    font-size: 16px;
}

.t-prompt { color: var(--yellow);  font-weight: bold; }
.t-verb   { color: var(--cyan); }
.t-arg    { color: var(--magenta); }

/* ---- Edit bar ---- */
#page_menu {
    text-align: right;
    padding: 2px 0;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--fg-muted);
}

/* ---- Page content ---- */
.page_content { padding: 4px 0; }

/* ---- Blog post / page listing entries ---- */
div.page {
    border-left: 2px solid var(--magenta-dim);
    padding: 0.3em 0.5em 0.5em 0.9em;
    margin-bottom: 1.2em;
}

div.title {
    font-weight: bold;
    color: var(--cyan);
    padding: 2px 0;
}

div.page_title {
    font-weight: bold;
    margin-bottom: 3px;
}

div.page_title a { color: var(--cyan) !important; text-decoration: none; }
div.page_title a:hover { color: var(--bg) !important; background: var(--cyan); }

div.subtitle  { font-size: 1.9em;  font-weight: bold; color: var(--magenta); }
div.subtitle2 { font-size: 1.4em; font-weight: bold; color: var(--cyan); }

/* Post metadata rendered as # amber comments */
div.page_header { margin-bottom: 5px; }

div.page_date,
div.page_time,
div.page_author {
    display: inline;
    color: var(--amber-dim);
    font-size: 0.85em;
}

div.page_date::before   { content: "# "; color: var(--amber-dim); }
div.page_time::before   { content: "  "; }
div.page_author::before { content: " | "; color: var(--amber-dim); }

div.page_body { padding: 0.3em 0; }

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: tty, monospace;
    color: var(--cyan);
    margin: 0.9em 0 0.35em;
}

h1::before { content: "# ";   color: var(--cyan-dim); font-weight: normal; }
h2::before { content: "## ";  color: var(--cyan-dim); font-weight: normal; }
h3::before { content: "### "; color: var(--cyan-dim); font-weight: normal; }

/* ---- Links ---- */
a { color: var(--amber) !important; text-decoration: underline; }
a:visited { color: var(--amber-dim) !important; }
a:hover {
    color: var(--bg) !important;
    background: var(--amber);
    text-decoration: none;
}

/* ---- Code ---- */
code {
    font-family: tty, monospace;
    font-size: 15px;
    color: var(--yellow);
    background: #080808;
    border: 1px solid var(--border);
    padding: 0 4px;
}

pre {
    white-space: pre-wrap;
    font-family: tty, monospace;
    font-size: 15px;
    background: #080808;
    border: 1px solid var(--border);
    border-left: 3px solid var(--cyan-dim);
    padding: 0.8em 1em;
    color: var(--fg);
    overflow-x: auto;
    margin: 0.6em 0;
    line-height: 1.45;
}

/* ---- Horizontal rule ---- */
hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1em 0;
}

/* ---- Tables ---- */
table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
}
th, td {
    border: 1px solid var(--border);
    padding: 4px 10px;
    text-align: left;
}
th {
    background: var(--cyan-muted);
    color: var(--cyan);
}
tr:nth-child(even) td { background: #101010; }

/* ---- Forms (wiki edit) ---- */
div.edit_form { font-family: tty, monospace; }

textarea {
    width: 100%;
    min-height: 14em;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--fg-dim);
    font-family: tty, monospace;
    font-size: 15px;
    padding: 6px;
    resize: vertical;
}

input[type="text"],
input[type="password"] {
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--fg-dim);
    font-family: tty, monospace;
    font-size: 15px;
    padding: 2px 6px;
}

/* ---- Buttons ---- */
span.button, button {
    display: inline-block;
    background: var(--bg);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 2px 10px;
    font-family: tty, monospace;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}

span.button a, button a {
    color: var(--cyan) !important;
    text-decoration: none;
}

span.button:hover, button:hover {
    background: var(--cyan);
    color: var(--bg);
}

span.button:hover a, button:hover a { color: var(--bg) !important; }

/* ---- Errors ---- */
div.error { padding: 1.2em; text-align: center; }
div.error span {
    display: inline-block;
    background: var(--magenta);
    color: var(--bg);
    padding: 3px 14px;
    font-weight: bold;
}

/* ---- Footer ---- */
div.footer {
    text-align: right;
    font-size: 12px;
    color: var(--fg-muted);
    border-top: 1px solid var(--border);
    padding: 3px 8px;
}
div.footer a { color: var(--fg-dim) !important; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track {
    background: var(--bg);
    border-left: 1px solid var(--border);
}
::-webkit-scrollbar-thumb { background: var(--fg-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--fg); }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    #container { margin: 0; border-left: none; border-right: none; border-top: none; }
    body { font-size: 16px; }
    #content { padding: 0.5em 0.7em 0.8em; }
}