/* =========================================================
   theme: aero  (frutiger aero, 2005)

   glass, high gloss, wallpaper with soap bubbles. the same blocks as
   everywhere else, just made of glass instead of paper.

   framework: 7.css (themes/lib/7.css) - windows, title bar, buttons. what
   stands here is written from scratch, but uses the custom properties of
   7.css (--w7-*) as its colour source: that way our blocks necessarily
   have the same edge, the same radius and the same gradient as the real
   windows widgets next to them.

   references and what was taken verbatim: sources.md next door.
   ========================================================= */

[data-theme="aero"] {
    /* the reference sets helvetica/arial, not segoe. makes more of a
       difference than you think: it is the difference between "vista" and
       "web 2.0 gloss". */
    --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* the path has to be absolute even though the image sits right next to
       this file: the browser resolves a relative url() inside a custom
       property against the file where var() is USED - and that is feed.css
       at the root, not this file. */
    --surface: url("/feed/themes/aero/frutiger-aero.webp");
    --base-color: #1d3c54;
    --surface-size: cover;
    --surface-repeat: no-repeat;
    --surface-attach: fixed;

    --ink: #12303f;
    --muted: #4b7285;
    --link: #0a5ca8;

    --head-ink: #ffffff;
    --head-shadow: 0 2px 6px rgba(4, 34, 52, 0.8);

    /* the client area of the window: solid light grey like on vista.
       the glass sits only in the frame, not under the text. */
    --paper: rgba(240, 240, 240, 0.96);
    --paper-clear: rgba(240, 240, 240, 0);

    --block: #eef6fa;
    --block-edge: rgba(90, 150, 170, 0.55);

    --rule: rgba(75, 179, 212, 0.35);

    /* 7.css gives the windows 6px - anything else would look foreign next to them */
    --radius: 3px;
    --radius-lg: 6px;

    --top-gap: 20px;

    /* the pale mint gradient of the reference, exact values from their
       style.css (on [role="tabpanel"] there): #bdf7f1 -> #dbfbf8 53% -> #f6fefd */
    --mint: linear-gradient(#bdf7f1 0%, #dbfbf8 53%, #f6fefd 100%);
}

/* ---------- our own blocks, spoken in 7.css ---------- */
[data-theme="aero"] blockquote,
[data-theme="aero"] .callout,
[data-theme="aero"] pre,
[data-theme="aero"] table {
    border-radius: var(--w7-el-bdr);
    box-shadow: var(--w7-el-sd);
    border: 1px solid #cdd7db;
}

/* callout like a fieldset: the kind sits as a legend on the top edge.
   note and warning differ via the edge, not via a big pastel area - that
   was the restless part */
[data-theme="aero"] .callout {
    position: relative;
    margin-top: 34px;
    padding: 16px 14px 12px;
    background: var(--w7-surface);
    border-color: var(--w7-el-bd-h);
}
[data-theme="aero"] .callout .callout-kind {
    position: absolute;
    top: -0.7em;
    left: 9px;
    margin: 0;
    padding: 0 5px;
    background: var(--w7-surface);
    letter-spacing: 1px;
    color: #1c5c85;
}
[data-theme="aero"] .callout-warning {
    border-color: #c88a2e;
}
[data-theme="aero"] .callout-warning .callout-kind {
    color: #96601a;
}

/* quote: the pale mint box of the reference, with a thin accent edge on the left */
[data-theme="aero"] blockquote {
    padding: 14px 16px;
    background-image: var(--mint);
    border-left: 3px solid var(--w7-el-bd-h);
}

/* code looks like a pressed-in text field - white and sunken */
[data-theme="aero"] pre {
    background: #fff;
    border-color: var(--w7-el-bd);
    box-shadow: var(--w7-el-sd-a);
}
[data-theme="aero"] :not(pre) > code {
    background: var(--w7-el-bg-s-1);
    border: 1px solid #dcdcdc;
    border-radius: 2px;
}

/* a bookmark is something to press, so here it is a real 7.css button:
   the same gradient, the same edge, and on hover the blue glow that
   windows buttons had. no scale, buttons do not hop. */
[data-theme="aero"] .bookmark {
    border: 1px solid var(--w7-el-bd);
    border-radius: var(--w7-el-bdr);
    background: var(--w7-el-grad);
    box-shadow: var(--w7-el-sd);
}
[data-theme="aero"] .bookmark:hover {
    border-color: var(--w7-el-bd-h);
    background: var(--w7-el-grad-h);
}
[data-theme="aero"] .bookmark:active {
    border-color: var(--w7-el-bd-a);
    background: var(--w7-el-grad-a);
    box-shadow: var(--w7-el-sd-a);
}
[data-theme="aero"] .bookmark-host {
    color: #10405e;
}

/* table like a 7.css list: white, topbar in the button gradient */
[data-theme="aero"] table {
    background: #fff;
    border-color: var(--w7-el-bd);
}
[data-theme="aero"] th,
[data-theme="aero"] td {
    border: 0;
    border-bottom: 1px solid #e5e5e5;
}
[data-theme="aero"] th {
    background: var(--w7-el-grad);
    border-bottom: 1px solid var(--w7-el-bd-d);
    color: #1c5c85;
}

[data-theme="aero"] hr {
    border-top: 1px solid var(--w7-el-bd-d);
}

[data-theme="aero"] .note img {
    border: 1px solid rgba(90, 150, 170, 0.5);
    border-radius: 3px;
    padding: 6px;
    background: #fff;
}

/* ---------- the window ----------
   frame, title bar and the three buttons come entirely from 7.css.
   7.css puts the window padding on .window-body - which is why .note has
   none here, otherwise it would be doubled up. */
[data-theme="aero"] .note {
    padding: 0;
}
[data-theme="aero"] .window-body {
    padding: 26px 28px 18px;
}

/* the path is sometimes longer than the bar */
[data-theme="aero"] .title-bar-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* in the reference the headings are bold and dark, not thin and light. on
   a solid window that is also the more readable option. */
[data-theme="aero"] .note h1,
[data-theme="aero"] .note h2,
[data-theme="aero"] .note h3 {
    font-weight: bold;
    letter-spacing: -0.2px;
    color: #2c2c2c;
}
[data-theme="aero"] .note h1 {
    font-size: 1.9rem;
}
[data-theme="aero"] .note h2 {
    font-size: 1.5rem;
}
[data-theme="aero"] .note h3 {
    font-size: 1.15rem;
    color: #2a6b85;
}

/* centred stays centred - only the type gets denser, 2005 was set tighter */
[data-theme="aero"] body {
    padding: var(--top-gap) 20px 60px;
    font-size: 0.875rem;
    line-height: 1.45;
}

/* the topbar is itself a 7.css window here. frame, radius and shadow come
   from there, then - a gradient of our own would always be a different
   design language next to it. only the innards are left here. */
[data-theme="aero"] .topbar {
    margin: 0 0 22px;
    /* a 7.css window is transparent itself, the surface is normally
       supplied by .window-body. the bar has none, so here it is the same
       one directly. */
    background-color: var(--paper);
}
[data-theme="aero"] .topbar-inner {
    align-items: center;
    padding: 6px 12px;
}
[data-theme="aero"] .topbar .back a {
    color: #1a4a6b;
    text-shadow: none;
}

/* ---------- theme picker: individual glass pills ----------
   no continuous segmented control: the source line sits between the
   buttons, a shared edge would have nothing to enclose there. */
[data-theme="aero"] .theme-picker button {
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    background-color: transparent;
    background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(150, 200, 225, 0.35));
    backdrop-filter: blur(10px) saturate(1.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 10px rgba(0, 0, 0, 0.25);
    color: #2a5a75;
}
/* pressed: gradient flipped, shadow going inwards */
[data-theme="aero"] .theme-picker button.selected {
    background-image: linear-gradient(rgba(110, 170, 200, 0.5), rgba(255, 255, 255, 0.55));
    box-shadow: inset 0 2px 4px rgba(10, 60, 90, 0.35);
    color: #0b3d5c;
}

/* ---------- taskbar: this is where the credit stands ----------
   the reference has a <footer> at the bottom with a taskbar.png in it.
   that image is theirs, so this here is a real windows 7 bar made of
   gradients: dark glass, light edge on top, darkened at the bottom. sticks
   to the viewport so the credit is always visible. */
[data-theme="aero"] .credit[data-for="aero"] {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    margin: 0;
    padding: 10px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    background-color: rgba(18, 30, 42, 0.82);
    background-image: linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.04) 45%, rgba(0, 0, 0, 0.22));
    backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 -3px 12px rgba(0, 0, 0, 0.4);
    font-size: 0.7rem;
    line-height: 1.5;
    color: #dbe8f2;
}
[data-theme="aero"] .credit a {
    color: #9ed2f7;
}