/* Color variables */
:root {
    --bg: #000;
    --subtle-accent: rgb(179, 255, 192);
    --accent: #00ff7f;
    --text: #cccccc;
    --green: #00ff00;
    --prompt-bg: rgba(0, 0, 0, 0.98);
    --suggestions-bg: rgba(0, 0, 0, 0.95);
    --shadow-1: rgba(0, 0, 0, 0.5);
    --shadow-2: rgba(0, 0, 0, 0.6);
    --accent-hover: #66ff99;
    --suggestions-bg-hover: rgba(0, 255, 127, 0.1);
    --suggestions-bg-selected: rgba(0, 255, 127, 0.2);
    --link: #b3ffb3;
    --link-hover: #9ece6a;
    --white: #ffffff;
    --selection-bg: #cccccc;
    --selection-fg: #3e006e;
    --boot-ok: #00ff66;
    --boot-stable: #00ccff;
    --boot-warning: #ffcc00;
    --boot-error: #ff4444;
}

/* Layout basics */
html, body {
    margin: 0;
    height: 100%;
}

/* Terminal container */
#terminal {
    position: relative;
    height: 100vh;
    font-family: monospace;
    background-color: var(--bg);
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1.1;
}

/* Output area (single consolidated rule) */
#output {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 2rem;
    overflow-y: auto;
    padding: 1rem;
    white-space: pre-wrap;
    color: var(--text);
    font-family: monospace;
}

/* Bottom bar and its layering */
#bottom-bar {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column-reverse;
    max-height: 12rem;
    overflow: hidden;
    z-index: 50;
    pointer-events: auto;
}

/* Prompt */
#prompt {
    display: flex;
    align-items: center;
    background: var(--prompt-bg);
    padding: 0;
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--shadow-1);
    z-index: 52;
    min-width: 0;
    visibility: hidden; /* Shown by login animation */
}

#prompt .prefix {
    color: var(--green);
    font-weight: bold;
}

#prompt .input-text {
    flex: 1;
    min-width: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#prompt input,
#cmd {
    background: transparent;
    border: none;
    color: inherit;
    outline: none;
    font: inherit;
    font-family: monospace;
    caret-color: var(--green);
    width: 100%;
}

/* Suggestions panel */
#suggestions {
    position: fixed;
    bottom: 2rem;
    left: 1rem;
    min-height: 1.2em;
    max-height: 12rem;
    overflow-y: auto;
    margin-bottom: 0.25rem;
    font-family: monospace;
    color: var(--green);

    background: var(--suggestions-bg);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    box-shadow: 0 6px 18px var(--shadow-2);
    z-index: 51;

    visibility: hidden; /* Shown by login animation */
}

#suggestions div {
    display: block;
    cursor: pointer;
    white-space: pre;
    padding-left: 0.5rem;
}

#suggestions div.selected {
    font-weight: bold;
    color: var(--green);
}

#suggestions div span.command {
    display: inline-block;
    border-radius: 3px;
    padding: 0 0.25rem;
}

#suggestions div span.command:hover {
    color: var(--accent-hover);
    background-color: var(--suggestions-bg-hover);
}

#suggestions div span.selected {
    font-weight: bold;
    color: var(--green);
    background-color: var(--suggestions-bg-selected);
}

/* Output typography and elements */
#output p {
    margin: 0 0 -0.5rem 0;
    line-height: 1.2;
}

#output h1, #output h2, #output h3, #output h4, #output h5, #output h6 {
    margin-top: 0;
    margin-bottom: -1rem;
    line-height: 1.2;
}

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

#output a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

#output .user-dir {
    color: var(--green);
    font-weight: bold;
}

#output .command-output {
    color: var(--white);
}

#output .half {
    width: 50%;
    font-size: 0;
    max-width: 100%;
}

#output .gap {
    display: inline-block;
    width: 1%;
}

#output .oneline {
    display: flex;
}

/* Scrollbar styling for WebKit browsers */
#output::-webkit-scrollbar {
    width: 8px;
}

#output::-webkit-scrollbar-track {
    background: var(--bg);
}

#output::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 4px;
    border: 2px solid var(--link-hover);
}

#output::-webkit-scrollbar-thumb:hover {
    background-color: var(--link-hover);
}

/* Text selection */
::selection {
    background-color: var(--selection-bg);
    color: var(--selection-fg);
}

/* Boot / status classes */
.boot-tag { font-weight: bold; }
.boot-ok { color: var(--boot-ok); }
.boot-stable { color: var(--boot-stable); }
.boot-warning { color: var(--boot-warning); }
.boot-fail,
.boot-error { color: var(--boot-error); }

/* Responsive adjustments */
@media (max-width: 768px) {
    #terminal { font-size: 0.9rem; }

    #suggestions { font-size: 0.9rem; }

    #output .half { width: 100%; }

    #output h1, #output h2, #output h3, #output h4, #output h5, #output h6 {
        margin-top: 0;
        margin-bottom: -0.5rem;
        line-height: 1.2;
    }

    .boot { font-size: calc(2.6vw - 1px); }
}

@media (max-width: 384px) {
    #output { font-size: calc(2.6vw - 1px); }
}











/* Generic table styling applied to all CV tables */
.cv div[class] table {
    width: min(60ch, 100%);
    table-layout: fixed;
    border-collapse: collapse;
    font-family: monospace;
    font-size: 1.25rem;
    line-height: 1.1;
    margin-bottom: 1em;
    margin-top: -1em;
}

.cv div[class] th,
.cv div[class] td {
    padding: 0.1em 0.3em;
    vertical-align: top;
    word-wrap: break-word;
}

.cv div[class] td br {
    margin-bottom: 0.15em;
}

.cv div[class] th:first-child,
.cv div[class] td:first-child {
    color: var(--accent-hover);
}

/* .cv div[class] td { */
    /* background-color: rgba(0, 255, 127, 0.02); */
/* } */

/* .cv div[class] th:last-child, */
/* .cv div[class] td:last-child { */
    /* color: var(--boot-warning); */
/* } */


/* === Education table === */
.cv .education table {
    width: min(60ch, 100%);
}

.cv .education th:first-child,
.cv .education td:first-child {
    width: 10ch;
}

.cv .education th:last-child,
.cv .education td:last-child {
    width: calc(100% - 10ch);
}

.cv .education td em {
  font-style: normal;
  color: #aaaaaa;
}

.cv .education td b {
  font-style: normal;
  color: var(--subtle-accent);
}


/* === Talks / Presentations table === */
.cv .talks table {
    width: min(60ch, 100%);
}

.cv .talks th:first-child,
.cv .talks td:first-child {
    width: 5ch;
}

.cv .talks th:last-child,
.cv .talks td:last-child {
    width: calc(100% - 5ch);
}

.cv .talks td b {
  font-style: italic;
  color: var(--subtle-accent);
}


/* === Computer Skills table === */
.cv .computer-skills table {
    width: min(60ch, 100%);
}

.cv .computer-skills th:first-child,
.cv .computer-skills td:first-child {
    width: 12ch;
}

.cv .computer-skills th:last-child,
.cv .computer-skills td:last-child {
    width: calc(100% - 12ch);
}



/* === Other Skills table === */
.cv .other-skills table {
    width: min(60ch, 100%);
}

.cv .other-skills th:first-child,
.cv .other-skills td:first-child {
    width: 12ch;
}

.cv .other-skills th:last-child,
.cv .other-skills td:last-child {
    width: calc(100% - 12ch);
}



/* Responsive adjustments for narrow screens */
@media (max-width: 768px) {
    .cv div[class] table {
        width: 100%;
        font-size: 1rem;
    }

    .cv div[class] td:first-child {
        width: 12ch;
    }

    .cv div[class] td:last-child {
        width: auto;
    }
}




.cv .roles .role {
  line-height: 1.3;           /* tighter spacing within a role */
}

.cv .roles .role-title {
  font-size: 1.5rem;          /* larger role title */
  font-weight: 600;
  color: var(--accent-hover); /* or replace with a specific colour */
}

.cv .roles b {
  font-weight: 600;
  font-style: italic;
  color: #888888;
  font-size: 1.25rem;
}

.cv .roles i {
  color: var(--boot-stable);
  font-style: italic;
}

.cv .roles em {
  font-style: italic;
}

.cv .roles a {
  color: var(--accent);
  text-decoration: underline;
}

.cv .c {
  color: var(--accent);
  text-decoration: underline;
}



/* Headings */
.cv h1 {
    color: var(--green);
    font-size: 2rem;
}
.cv h2 {
    color: var(--green);
    font-size: 1.75rem;
}
.cv h3 {
    color: var(--green);
}
.cv h4 {
    color: var(--green);
}