/* =========================================================
   theme: simple

   the plain white blog. no framework, no surface, no shadows, no window
   around anything - white page, black text, blue links, and air.

   the other four are dressed up; this one is the way out. whoever just
   wants to read gets a page that does not perform.

   nothing here is vendored, taken or copied - the look is the generic
   jekyll/blog default that a hundred sites share. no credit line and no
   source in the picker, because there is nobody to name.
   ========================================================= */

[data-theme="simple"] {
    --font: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* no image, no gradient. the base colour IS the page */
    --surface: none;
    --base-color: #fdfdfd;

    --ink: #111;
    --muted: #6a6a6a;
    --link: #2a7ae2;

    /* the head sits on the white page here, not on a dark surface - so it
       reads like the body text and does not need a shadow to survive */
    --head-ink: #111;
    --head-shadow: none;

    /* the sheet is the same white as the page: a note is not an object on
       a ground here, it is just the text. the fade-out at the bottom of a
       clipped tile still needs the transparent twin */
    --paper: #fdfdfd;
    --paper-clear: rgba(253, 253, 253, 0);

    --block: #f5f5f5;
    --block-edge: #e3e3e3;

    --rule: #e6e6e6;

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

    /* a little more air at the top than the others, because there is
       nothing up there to look at */
    --top-gap: 26px;
}

/* no framework, so the window title bar in every note is unstyled markup
   and has to go - same as in the wall theme */
[data-theme="simple"] .title-bar {
    display: none;
}

/* ---------- head: one thin line, like a masthead ---------- */
[data-theme="simple"] .topbar {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    /* on a single post the note follows straight after and its first heading
       has its top margin stripped by the base - without this the title sits
       right on the line. on the feed page the larger margin of .feed-title
       wins instead, the two collapse into one */
    margin-bottom: 26px;
}

[data-theme="simple"] .back a {
    text-decoration: none;
    color: var(--muted);
}
[data-theme="simple"] .back a:hover {
    color: var(--ink);
}

/* not bold and not huge. the entries below are the point, not the word feed */
[data-theme="simple"] .feed-title {
    font-size: 1.6rem;
    font-weight: 400;
    margin: 34px 0 30px;
}

/* ---------- the sheet, which is not one ---------- */
/* the note has no ground of its own, so the padding around it is pointless
   and the space between two entries has to come from somewhere else: a rule,
   not a gap plus a shadow */
[data-theme="simple"] .note {
    padding: 0 0 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--rule);
}

/* the last one needs no line, there is nothing following it */
[data-theme="simple"] .note:last-of-type {
    border-bottom: 0;
}

/* on a single post the frame is gone entirely - nothing to separate */
[data-theme="simple"] .note:only-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

[data-theme="simple"] .note h1,
[data-theme="simple"] .note h2,
[data-theme="simple"] .note h3 {
    font-weight: 600;
}

/* the tile headline is the link to the post, so it carries the link colour
   and no underline - the size already says it is one */
[data-theme="simple"] .note h2 a {
    text-decoration: none;
}

/* ---------- quote and code: grey, no edge ---------- */
[data-theme="simple"] blockquote {
    margin: 26px 0;
    border-left: 3px solid var(--block-edge);
    background: none;
    color: var(--muted);
}

[data-theme="simple"] .bookmark:hover {
    background: #eee;
}

/* ---------- theme picker: text, not buttons ---------- */
/* the picker is the one place this theme cannot stay out of, because
   without a framework the buttons are unstyled system buttons */
[data-theme="simple"] .theme-picker button {
    border: 1px solid var(--rule);
    border-radius: 3px;
    background-color: #fff;
    color: var(--muted);
}
[data-theme="simple"] .theme-picker button:hover {
    color: var(--ink);
}
[data-theme="simple"] .theme-picker button.selected {
    border-color: var(--ink);
    color: var(--ink);
}

/* the credit lines under the picker read --head-ink, which is dark here.
   they would sit as black text on white and shout - so they are quieter */
[data-theme="simple"] .theme-source {
    opacity: 0.55;
}