/* =========================================================
   feed + individual notes: the base.

   this only says WHERE something sits and HOW BIG it is. what it looks
   like lives in static/themes/<name>/theme.css - one file per theme, each
   one under its own [data-theme="..."].

   so adding a new theme means adding a folder, and for that it has to set
   the tokens below. nothing more is mandatory; everything beyond that is
   freestyle.
   ========================================================= */

/* ---------- the contract ----------
   these are the values the base reads. a theme that sets all of them
   looks finished. the numbers here are only an emergency exit so that
   nothing goes invisible when a theme forgets something. */
:root {
    --font: system-ui, sans-serif;

    /* the surface: image, gradient or none. every theme is free to put its
       own background image into its folder and point at it here.

       CAREFUL absolute path. the browser resolves a relative url() inside a
       custom property against the file where var() is used - and that is
       this one, not the theme. so a relative path always misses. */
    --surface: none;
    --base-color: #3a3a3a; /* sits under --surface, while it loads or if it is missing */
    --surface-size: auto;
    --surface-repeat: repeat;
    --surface-attach: scroll;

    --ink: #1a1a1a; /* body text */
    --muted: #666; /* incidentals: date, url, ... */
    --link: #0a5ca8;

    --head-ink: #fff; /* title and back link, the ones sitting on the surface */
    --head-shadow: none;

    /* the sheet of a note - and the same tone once more, transparent,
       because the fade-out at the end of a tile has to run into it */
    --paper: #f2f2f2;
    --paper-clear: rgba(242, 242, 242, 0);

    /* generic block: quote, callout, code, table, bookmark */
    --block: #fafafa;
    --block-edge: #c8c8c8;

    --rule: #d4d4d4; /* thin separator lines */

    --radius: 0;
    --radius-lg: 0;

    --top-gap: 40px; /* top edge of the content */

    /* width of the content column. the theme picker works the right-hand
       gutter out from it, so both have to read the same value */
    --column: 780px;
}

/* =========================================================
   layout
   ========================================================= */

body {
    background-color: var(--base-color);
    background-image: var(--surface);
    background-repeat: var(--surface-repeat);
    background-size: var(--surface-size);
    background-attachment: var(--surface-attach);

    box-sizing: border-box;
    max-width: var(--column);
    margin: 0 auto;
    padding: var(--top-gap) 30px 120px;

    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
}

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

/* ---------- head ---------- */
.back a,
.feed-title {
    color: var(--head-ink);
    text-shadow: var(--head-shadow);
}
.feed-title {
    font-size: 2rem;
    margin: 10px 0 40px;
}

.topbar-inner {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

/* ---------- theme picker ----------
   a column in the right-hand gutter, next to the first post. a column can
   keep growing downwards, a row falls over at some point.

   it sits in the dom exactly where the first post begins (theme-picker.njk,
   included by feed.njk and post.njk). absolutely positioned, but WITHOUT
   top: then it keeps its static position - that is, exactly the height it
   would have ended up at in the flow. so it is necessarily flush with the
   post, without a height being computed anywhere.

   horizontally its centre sits in the middle of the gutter between the
   column edge and the window edge: the gutter runs from 50% + column/2 to
   100%, the middle of that is 75% + column/4. the width is fixed so that
   it still fits into the narrowest gutter at 1100px. */
.theme-picker {
    position: absolute;
    left: calc(75% + var(--column) / 4);
    transform: translateX(-50%);
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 140px;
}

/* one entry is the button plus the line saying where the theme comes from */
.theme-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* deliberately without a border/background reset: that way themes with a
   framework (xp, 98, ...) get the framework's real button for free. themes
   without a framework style their button themselves. */
.theme-picker button {
    padding: 5px 10px;
    font-family: var(--font);
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

/* the credit sits below the button on the surface, not inside the button -
   so it reads the head colour and needs no per-theme rule */
.theme-source {
    margin: 0;
    font-size: 0.6rem;
    line-height: 1.25;
    text-align: center;
    color: var(--head-ink);
    text-shadow: var(--head-shadow);
    opacity: 0.85;
}
.theme-source a {
    color: inherit;
}

/* from here on there is no gutter left next to the column: the picker
   falls back into the flow and sits as a row above the first post */
@media (max-width: 1100px) {
    .theme-picker {
        position: static;
        transform: none;
        width: auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        margin-bottom: 22px;
    }
}

/* ---------- the sheet ---------- */
.note {
    position: relative;
    background-color: var(--paper);
    border-radius: var(--radius-lg);
    padding: 34px 32px 22px;
    margin-bottom: 70px;
}

.note > :first-child,
.window-body > :first-child {
    margin-top: 0;
}

/* the window title bar sits in the dom of every note, but it is drawn by
   7.css/XP.css/98.css - if a theme has no framework it is unstyled and has
   to go. the same goes for the credit line: there is one per theme, and
   each theme makes its own visible. */
.credit {
    display: none;
}

/* ---------- headings ---------- */
.note h1,
.note h2,
.note h3 {
    line-height: 1.25;
    margin: 1.6em 0 0.5em;
}
.note h1 {
    font-size: 1.5rem;
}
.note h2 {
    font-size: 1.25rem;
}
.note h3 {
    font-size: 1.05rem;
}

/* ---------- quote ---------- */
blockquote {
    position: relative;
    margin: 30px 6px;
    padding: 20px 24px;
    background-color: var(--block);
    border-left: 5px solid var(--block-edge);
    border-radius: var(--radius);
}
blockquote p:last-child {
    margin-bottom: 0;
}

/* ---------- callout ---------- */
.callout {
    margin: 30px 0;
    padding: 18px 20px;
    background-color: var(--block);
    border-radius: var(--radius);
}
.callout .callout-kind {
    margin: 0 0 6px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.7rem;
}
.callout p:last-child {
    margin-bottom: 0;
}

/* ---------- bookmark ---------- */
.bookmark {
    display: block;
    margin: 30px 0;
    padding: 16px 20px;
    background: var(--block);
    border: 1px solid var(--block-edge);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
}
.bookmark-host {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
}
.bookmark-url {
    display: block;
    font-size: 0.72rem;
    color: var(--muted);
    word-break: break-all;
}

/* ---------- code ---------- */
pre {
    margin: 30px 0;
    padding: 18px 20px;
    background-color: var(--block);
    border-radius: var(--radius);
    font-size: 0.8rem;
    line-height: 1.5;
    overflow-x: auto;
}
code {
    font-family: monospace;
}
:not(pre) > code {
    background-color: var(--block);
    padding: 1px 5px;
    border-radius: var(--radius);
}

/* ---------- image ---------- */
.note img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 30px auto;
    border-radius: var(--radius);
}

/* ---------- lists ---------- */
.note ul,
.note ol {
    padding-left: 1.4em;
}
.note li {
    margin: 4px 0;
}
.note li input[type="checkbox"] {
    margin-right: 6px;
}

/* ---------- table ---------- */
table {
    width: 100%;
    margin: 30px 0;
    border-collapse: collapse;
    font-size: 0.85rem;
    background-color: var(--block);
}
th,
td {
    border: 1px solid var(--block-edge);
    padding: 7px 10px;
    text-align: left;
}

/* ---------- separator ---------- */
hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 36px 0;
}

/* ---------- footer line with permalink ---------- */
.meta {
    margin: 26px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-size: 0.75rem;
    color: var(--muted);
}
.meta a {
    text-decoration: none;
    font-weight: bold;
}

/* ---------- feed: all tiles alike, too long gets clipped ---------- */
.note[data-url] {
    cursor: pointer;
}

.excerpt {
    position: relative;
    max-height: 40em; /* the knob: how tall a tile gets at most */
    overflow: hidden;
}

/* text fades out towards the bottom instead of breaking off hard */
.note.clipped .excerpt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4em;
    background: linear-gradient(var(--paper-clear), var(--paper));
}

/* the tear-off edge with the ... - only when something really is missing */
.more {
    display: none;
}
.note.clipped .more {
    display: block;
    margin: 0;
    padding-top: 2px;
    border-top: 1px solid var(--rule);
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.1;
    letter-spacing: 0.35em;
    color: var(--muted);
}