/*
 * Deila tilvitnun (news/snippets/quote_share.html, site/tilvitnun/tilvitnun.js), on every outlet: the bar by a selection
 * of the article's text and the picture's sheet. Of the article head's family (site/article-head/article-head.css
 * .ahead__pop): on the ground behind the text with a faint ring and a shadow, its buttons without boxes till hovered, in
 * a tint of the text; the colours are the text's (the script reads its ink and ground into --tilv-ink, --tilv-ground),
 * so it is right on white, on an opinion piece's tint, in the dark look and in each outlet's type.
 *   On a computer  a row over the selection (under it near the window's top), its share list in its place;
 *   on a phone     a bar of three at the screen's foot, clear of the phone's own menu by the selection;
 *   the picture    in a sheet over the page, its buttons under it: Deila mynd filled in the ink, the rest in the tint.
 */
.tilv, .tilv-sheet__box {
    --tilv-tint: color-mix(in srgb, currentColor 7%, transparent);
    --tilv-tint-hover: color-mix(in srgb, currentColor 13%, transparent);
    --tilv-rule: color-mix(in srgb, currentColor 16%, transparent);
    color: var(--tilv-ink, inherit);
    background: var(--tilv-ground, var(--base-bg, #fff));
}
.tilv *, .tilv *::before, .tilv *::after, .tilv-sheet *, .tilv-sheet *::before, .tilv-sheet *::after { box-sizing: border-box; }

.tilv {
    position: absolute; z-index: 10050; top: 0; left: 0; max-width: calc(100vw - 16px); padding: 5px;
    border-radius: 14px; box-shadow: 0 0 0 1px var(--tilv-rule), 0 8px 28px rgba(0, 0, 0, .16);
    font-size: 15px; line-height: 1.2; text-align: left;
}
[data-theme="dark"] .tilv, [data-theme="dark"] .tilv-sheet__box { box-shadow: 0 0 0 1px var(--tilv-rule), 0 10px 32px rgba(0, 0, 0, .55); }
.tilv[hidden], .tilv [hidden] { display: none; }
.tilv__row { display: flex; gap: 2px; }
.tilv__list { display: flex; flex-direction: column; min-width: 210px; }
.tilv button, .tilv a {
    display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 12px; border: 0; border-radius: 9px;
    background: none; color: inherit; font: inherit; font-weight: 650; text-align: left; text-decoration: none;
    white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.tilv button:hover, .tilv a:hover { background: var(--tilv-tint); color: inherit; text-decoration: none; }
.tilv button:focus { outline: none; }
.tilv button:focus-visible, .tilv a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.tilv svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* The list's last, the link copied, under a line; the phone's own Deila… first, over one */
.tilv__list [data-tilv-link] { margin-top: 4px; border-top: 1px solid var(--tilv-rule); border-radius: 0 0 9px 9px; }
.tilv__list [data-tilv-native] { margin-bottom: 4px; border-bottom: 1px solid var(--tilv-rule); border-radius: 9px 9px 0 0; }

/* A phone: at the screen's foot, three side by side, each its picture over its word */
.tilv.tilv--foot {
    position: fixed; top: auto !important; left: 8px !important; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    max-width: none; padding: 6px;
}
.tilv--foot .tilv__row button { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 9px 4px; font-size: 13px; text-align: center; white-space: normal; }
.tilv--foot .tilv__row svg { width: 21px; height: 21px; }
.tilv--foot .tilv__list button, .tilv--foot .tilv__list a { padding: 12px 14px; font-size: 16px; }

/* The picture */
.tilv-sheet {
    position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(0, 0, 0, .55);
}
.tilv-sheet[hidden], .tilv-sheet [hidden] { display: none; }
html.tilv-open, html.tilv-open body { overflow: hidden; }
.tilv-sheet__box {
    width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 14px; border-radius: 18px;
    box-shadow: 0 0 0 1px var(--tilv-rule), 0 10px 32px rgba(0, 0, 0, .25); font-size: 15px; line-height: 1.3;
}
.tilv-sheet__box:focus { outline: none; }
.tilv-sheet__pic {
    display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 10px; background: var(--tilv-tint);
}
.tilv-sheet__pic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tilv-sheet__pic p { margin: 0; padding: 24px; font-weight: 600; text-align: center; color: color-mix(in srgb, currentColor 70%, transparent); }
.tilv-sheet__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tilv-sheet__actions > button, .tilv-sheet__actions > a {
    display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; height: 44px; margin: 0; padding: 0 18px;
    border: 0; border-radius: 999px; background: var(--tilv-tint); color: inherit; font: inherit; font-weight: 700;
    text-decoration: none; white-space: nowrap; cursor: pointer;
}
.tilv-sheet__actions > button:hover, .tilv-sheet__actions > a:hover { background: var(--tilv-tint-hover); color: inherit; text-decoration: none; }
.tilv-sheet__actions > button:focus { outline: none; }
.tilv-sheet__actions > button:focus-visible, .tilv-sheet__actions > a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Deila mynd: the ink filled, its word in the ground (as the head's Hlusta) */
.tilv-sheet__actions > .tilv-sheet__go, .tilv-sheet__actions > .tilv-sheet__go:hover { flex-basis: 100%; background: currentColor; }
.tilv-sheet__go > span { color: var(--tilv-ground, var(--base-bg, #fff)); }
.tilv-sheet__go:hover { filter: brightness(1.25); }
@media (max-width: 575px) {
    .tilv-sheet { align-items: flex-end; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
}