/*
 Colors live in Django_project_4/theme_colors.py, not here (see "design tokens" below) - changing a
 color there needs only a deploy.

 After each change in this file:
 1. Run collectstatic
 2. It is batter to change ?v=<n> to ?v=<n+1> in: templates_modern/poetry/katan/modern/_head.html:9
    since the static storage doesn't add a hash to file names, so without this, browsers and the CDN can keep serving the old stylesheet.
 */


/*
To change fonts: edit FONT_CSS in build_theme_assets.py, run it, then paste the new fonts.css over the block that starts at
"Generated by utils/build_theme_assets.py" and ends just before "design tokens".
The script doesn't do that paste for you.
 */

/* Generated by utils/build_theme_assets.py - Heebo, Frank Ruhl Libre and Alef,
   SIL Open Font License 1.1. Paths are relative to poetry/css/, where
   katan_modern.css inlines this block. Regenerate with the script rather
   than hand-editing. */

/* hebrew */
@font-face {
    font-family: 'Alef';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(../fonts/Alef-400-hebrew.woff2) format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin */
@font-face {
    font-family: 'Alef';
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(../fonts/Alef-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* hebrew */
@font-face {
    font-family: 'Alef';
    font-style: normal;
    font-weight: 700;
    font-display: fallback;
    src: url(../fonts/Alef-700-hebrew.woff2) format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin */
@font-face {
    font-family: 'Alef';
    font-style: normal;
    font-weight: 700;
    font-display: fallback;
    src: url(../fonts/Alef-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* hebrew */
@font-face {
    font-family: 'Frank Ruhl Libre';
    font-style: normal;
    font-weight: 300 900;
    font-display: fallback;
    src: url(../fonts/FrankRuhlLibre-variable-hebrew.woff2) format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin */
@font-face {
    font-family: 'Frank Ruhl Libre';
    font-style: normal;
    font-weight: 300 900;
    font-display: fallback;
    src: url(../fonts/FrankRuhlLibre-variable-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* hebrew */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100 900;
    font-display: fallback;
    src: url(../fonts/Heebo-variable-hebrew.woff2) format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin */
@font-face {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 100 900;
    font-display: fallback;
    src: url(../fonts/Heebo-variable-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============ design tokens ============ */
/* COLORS ARE NOT SET HERE. Every color (and shadow) of this theme, light and dark, is a row in
   Django_project_4/theme_colors.py; the modern head partial renders both schemes as CSS variables
   (--bg, --card, --ink, --acc, ...) in an inline <style>, which wins over the block below. Use those
   names in this file - never a #hex / rgb() literal (poetry/tests_color_scheme.py checks this).
   The block below is a generated copy of the light column, so this file alone still shows the
   light theme exactly (a page without the inline palette, or this file uploaded before the code is
   deployed). Dark-only rules that variables cannot express are in "dark color scheme" at the end. */
/* BEGIN light colors - generated from Django_project_4/theme_colors.py by
   `python manage.py write_theme_colors_css`. Do not edit here. */
:root {
    --bg: #F5F7FB;
    --bg2: #EEF1F5;
    --card: #FFFFFF;
    --nav-bg: rgba(255, 255, 255, .9);
    --bd: #E5E9F2;
    --bd-soft: #F0F2F7;
    --bd-input: #CDD4E2;
    --track: #D8DEE7;
    --ink: #1F2937;
    --ink2: #374151;
    --ink3: #4B5563;
    --mut: #6B7280;
    --poem-ink: #222C38;
    --acc: #2F5FA8;
    --acc-d: #24508F;
    --acc-t: #EAF0FB;
    --acc-b: #CBD7EA;
    --on-acc: #FFFFFF;
    --coral: #FE4F70;
    --coral-d: #D93A5C;
    --coral-t: #FFE9EE;
    --coral-b: #FFC9D5;
    --act-on-bg: #FFF0F3;
    --note-ed-bg: #FFF3F5;
    --note-ed-bd: #FFD5DE;
    --danger: #B42318;
    --ok: #1E7A52;
    --ok-t: #EAF7F0;
    --ok-b: #BFE3D0;
    --warn: #8A6D1F;
    --warn-t: #FDF6E3;
    --warn-b: #EADBAE;
    --wait-t: #F0F2F6;
    --star: #E2C455;
    --mark-bg: #FFE66D;
    --mark-ink: #1F2937;
    --tab-bg: #FFFFFF;
    --tab-fg: #6B7280;
    --tab-on: #2F5FA8;
    --tab-bd: #E5E9F2;
    --cta-from: #12264C;
    --cta-to: #2F5FA8;
    --on-dark: #FFFFFF;
    --on-dark-mut: #D6E2F5;
    --glass: rgba(255, 255, 255, .2);
    --tip-veil-from: rgba(18, 38, 76, .93);
    --tip-veil-to: rgba(28, 60, 112, .34);
    --tips-veil-from: rgba(18, 38, 76, .75);
    --tips-veil-to: rgba(28, 60, 112, .15);
    --cover-veil-from: rgba(15, 25, 35, .55);
    --cover-veil-to: rgba(15, 25, 35, .05);
    --overlay: rgba(16, 24, 40, .45);
    --overlay-strong: rgba(16, 24, 40, .5);
    --logo-plate: transparent;
    --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -14px rgba(16, 24, 40, .16);
    --shadow-av: 0 1px 4px rgba(0, 0, 0, .12);
    --shadow-hover: 0 4px 14px rgba(0, 0, 0, .08);
    --shadow-best: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 36px -18px rgba(254, 79, 112, .5);
    --shadow-drawer: -18px 0 40px -24px rgba(16, 24, 40, .5);
}
/* END light colors */

:root {
    --r: 16px;
    --r-sm: 12px;
}

/* ============ base + shared components ============ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

body {
    direction: rtl;
    text-align: right;
    font-family: Heebo, Arial, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .15s
}

img {
    display: block;
    max-width: 100%
}

body :where(div,section,article,aside,figure,main,header,footer,span,li) {
    min-width: 0
}

.only-mobile {
    display: none
}

.tabbar {
    display: none
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px
}

.card {
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow)
}

.layout {
    display: grid;
    grid-template-columns:1fr 320px;
    gap: 24px;
    padding: 22px 0 34px;
    align-items: start
}

.single {
    padding: 22px 0 34px
}

/* header ------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bd);
    height: 70px;
    display: flex;
    align-items: center
}

.nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%
}

.nav img.logo {
    height: 36px;
    flex: none
}

.nav nav {
    display: flex;
    gap: 4px;
    align-items: center
}

.nav nav a {
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink2);
    white-space: nowrap
}

.nav nav a.on {
    background: var(--acc-t);
    color: var(--acc);
    font-weight: 700
}

.nav .r {
    display: flex;
    gap: 9px;
    align-items: center
}

.ib {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mut);
    font-size: 18px;
    flex: none
}

.ib img {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    object-fit: cover
}

.ib.only-mobile {
    display: none
}

/* .ib sets display:flex, so .only-mobile alone loses */
.pill {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--coral);
    color: var(--on-acc);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap
}

.pill.ghost {
    background: var(--card);
    color: var(--acc);
    border: 1px solid var(--acc-b)
}

.crumbs {
    font-size: 13px;
    color: var(--mut);
    padding: 16px 0 0
}

.crumbs b {
    color: var(--ink3);
    font-weight: 500
}

/* shared bits --------------------------------------------------- */
.who {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    color: var(--mut)
}

.who img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover
}

.who b {
    color: var(--ink);
    font-weight: 700;
    font-size: 15px
}

.k {
    font-size: 12px;
    background: var(--acc-t);
    color: var(--acc);
    padding: 5px 12px;
    border-radius: 999px;
    font-weight: 700
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: var(--r-sm);
    background: var(--coral);
    color: var(--on-acc);
    font-weight: 700;
    font-size: 15px
}

.btn.acc {
    background: var(--acc)
}

.btn.ghost {
    background: var(--card);
    color: var(--acc);
    border: 1px solid var(--acc-b)
}

.btn.sm {
    padding: 9px 16px;
    font-size: 14px
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

.chip {
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--acc-t);
    color: var(--acc);
    font-weight: 500;
    font-size: 15px
}

.chip.on {
    background: var(--acc);
    color: var(--on-acc);
    font-weight: 700
}

.chip.on b {
    color: var(--on-acc)
}

.acts {
    display: flex;
    gap: 22px;
    align-items: center;
    border-top: 1px solid var(--bd2);
    margin-top: 13px;
    padding-top: 11px;
    font-size: 14px;
    color: var(--mut);
    font-weight: 500
}

.acts b {
    color: var(--ink)
}

.acts .sp {
    margin-right: auto;
    font-size: 13px;
    color: var(--acc);
    font-weight: 700
}

/* the page-header area — katan_poetry_base.html renders page_title, page_sub_title,
   {% block header %}, {% block sub_header %} and the messages alerts above the main content */
.pagehead {
    padding: 22px 0 0
}

.pagehead.center {
    text-align: center
}

.pagehead h1 {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.2
}

.pagehead .sub {
    font-size: 16px;
    color: var(--ink2);
    line-height: 1.8;
    margin-top: 9px;
    max-width: 840px
}

.pagehead.center .sub {
    margin-inline: auto
}

.pagehead .meta {
    font-size: 15px;
    color: var(--mut);
    margin-top: 7px
}

.pagehead .meta b {
    color: var(--ink3);
    font-weight: 600
}

/* the "היצירה היומית" banner on /today and friends, matching the homepage news header band
   ([data-page="home"] .news .news-head). That one is a card's top strip, so it carries only
   a bottom border; this is a standalone box, so it takes the full border and radius. */
.spechead {
    background: var(--acc-t);
    border: 1px solid var(--acc-b);
    border-radius: var(--r);
    padding: 14px 22px;
    margin-top: 18px
}

.spechead h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--acc-d);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 12px
}

.spechead h2:before {
    content: "";
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: var(--coral);
    flex: none
}

.spechead a {
    color: var(--acc);
    font-weight: 800
}

.alert {
    border-radius: var(--r);
    border: 1px solid;
    padding: 14px 18px;
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    gap: 11px;
    align-items: flex-start
}

.alert .ic {
    flex: none;
    font-size: 17px;
    line-height: 1.4
}

.alert.warning {
    background: var(--warn-t);
    border-color: var(--warn-b);
    color: var(--warn)
}

.alert.success {
    background: var(--ok-t);
    border-color: var(--ok-b);
    color: var(--ok)
}

.alert.danger {
    background: var(--coral-t);
    border-color: var(--coral-b);
    color: var(--coral-d)
}

.alert.info {
    background: var(--acc-t);
    border-color: var(--acc-b);
    color: var(--acc-d)
}

.sec-t {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px
}

.sec-t i {
    width: 42px;
    height: 4px;
    background: var(--coral);
    border-radius: 2px;
    display: inline-block;
    flex: none;
    order: 1
}

.sec-t .more {
    order: 2;
    margin-right: auto;
    font-size: 13px;
    font-weight: 400;
    color: var(--acc)
}

/* work card (shared by list / author / me) ----------------------- */
.post {
    padding: 20px 22px 14px;
    margin-bottom: 18px
}

.post .head {
    display: flex;
    align-items: center;
    gap: 10px
}

.post .head .k {
    margin-right: auto
}

.post h3 {
    font-size: 23px;
    font-weight: 800;
    margin: 12px 0 6px
}

.post p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink2)
}

.post img.pic {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 14px;
    margin-top: 13px
}

/* right rail ---------------------------------------------------- */
.rail .card {
    padding: 20px;
    margin-bottom: 18px
}

.rail h4 {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px
}

/* margin-right:auto pushes the line to the far (left, RTL) end of the header, as the
   homepage's card .h2 does through its <small> */
.rail h4 i {
    width: 30px;
    height: 4px;
    background: var(--coral);
    border-radius: 2px;
    display: inline-block;
    flex: none;
    order: 1;
    margin-right: auto
}

.au {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bd2)
}

.au:last-child {
    border: 0
}

.au img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.au .t {
    font-size: 15px;
    font-weight: 700
}

.au .s {
    font-size: 12px;
    color: var(--mut)
}

.au .fol {
    margin-right: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--acc);
    border: 1px solid var(--acc-b);
    padding: 6px 12px;
    border-radius: 999px
}

.cm {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--coral)
}

.cm:last-child {
    border: 0
}

.cm img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

.cm .s {
    font-size: 13px;
    color: var(--mut)
}

/* the poem-type capsule in the meta line: smaller than the default .k, and the
   comment text is pushed down a little so the capsule does not touch it */
.cm .s .k {
    font-size: 11px;
    padding: 2px 9px;
    margin-inline-start: 4px
}

.cm .t {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink2);
    margin-top: 6px
}

.promo {
    background: var(--acc-t);
    border: 1px solid var(--acc-b);
    padding: 20px;
    border-radius: var(--r);
    margin-bottom: 18px
}

.promo .lbl {
    font-size: 12px;
    color: var(--coral);
    font-weight: 700
}

.promo h4 {
    font-size: 20px;
    font-weight: 900;
    margin: 8px 0;
    color: var(--ink)
}

.promo p {
    font-size: 14px;
    color: var(--ink2);
    line-height: 1.6
}

.promo a {
    display: inline-block;
    margin-top: 12px;
    background: var(--coral);
    color: var(--on-acc);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 999px
}

.tipcard {
    position: relative;
    overflow: hidden;
    border-radius: var(--r);
    margin-bottom: 18px;
    min-height: 210px;
    display: flex;
    align-items: flex-end
}

.tipcard img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.tipcard .veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tip-veil-from) 18%, var(--tip-veil-to))
}

.tipcard .in {
    position: relative;
    padding: 20px;
    color: var(--on-dark)
}

.tipcard h4 {
    font-size: 20px;
    font-weight: 900;
    color: var(--on-dark);
    margin-bottom: 5px
}

.tipcard p {
    font-size: 13px;
    color: var(--on-dark-mut);
    line-height: 1.55
}

.mini {
    display: flex;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px solid var(--bd2);
    align-items: center
}

.mini:last-child {
    border: 0
}

/* .thumb is always in the markup, so a work with no picture still reserves the slot and
   every row's title starts on the same line. Its size is the only thing that differs
   between the rail and the wider homepage card (see [data-page="home"] .mini below). */
.mini .thumb {
    width: 96px;
    height: 96px;
    flex: none
}

.mini .thumb .piclink {
    width: 100%;
    height: 100%
}

.mini .thumb img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover
}

.mini .meta {
    min-width: 0
}

/* let a long title wrap instead of stretching the row */
.mini .t {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35
}

.mini .s {
    font-size: 13px;
    color: var(--mut);
    margin-top: 3px
}

/* the homepage's "יצירות חדשות" card is roughly 513px wide against the rail's 280px, so it
   can afford the larger square without squeezing the title */
[data-page="home"] .mini .thumb {
    width: 128px;
    height: 128px
}

/* next to the taller homepage thumbnail the text starts at the top of the row
   instead of being vertically centered */
[data-page="home"] .mini {
    align-items: flex-start
}

.news-box {
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 18px
}

.news-box h4 {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 6px
}

.news-box p {
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.6
}

.news-box .fake {
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--mut);
    font-size: 13px;
    margin-top: 10px
}

.ad {
    border: 1px dashed var(--bd);
    border-radius: var(--r);
    overflow: hidden;
    background: var(--card);
    margin-bottom: 18px
}

.ad .lbl {
    font-size: 11px;
    color: var(--mut);
    text-align: center;
    padding: 6px
}

footer {
    background: var(--card);
    border-top: 1px solid var(--bd);
    padding: 26px 0;
    font-size: 14px;
    color: var(--mut)
}

footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap
}

footer a {
    margin-left: 18px
}

@media (max-width: 640px) {
    .only-mobile {
        display: block
    }

    .ib.only-mobile {
        display: flex
    }

    .no-mobile {
        display: none !important
    }

    .wrap {
        padding: 0 16px
    }

    .nav {
        height: 58px
    }

    .nav img.logo {
        height: 28px
    }

    .layout {
        grid-template-columns:1fr;
        padding: 14px 0 24px;
        gap: 18px
    }

    .card {
        border-radius: 14px
    }

    .sec-t {
        font-size: 20px
    }

    .pagehead h1 {
        font-size: 26px
    }

    .pagehead .sub {
        font-size: 15px
    }

    .alert {
        font-size: 15px;
        padding: 12px 15px
    }

    .spechead {
        padding: 12px 16px
    }

    .spechead h2 {
        font-size: 19px;
        gap: 10px
    }

    .spechead h2:before {
        height: 19px
    }

    .acts {
        gap: 14px;
        font-size: 13px
    }

    .post {
        padding: 16px 18px 12px
    }

    .post h3 {
        font-size: 20px
    }

    .post img.pic {
        height: 200px
    }

    .tabbar {
        position: sticky;
        bottom: 0;
        z-index: 40;
        display: flex;
        justify-content: space-around;
        background: var(--tab-bg);
        border-top: 1px solid var(--tab-bd);
        padding: 9px 0 13px;
        font-size: 11px;
        color: var(--tab-fg)
    }

    .tabbar div {
        text-align: center;
        line-height: 1.5
    }

    .tabbar span {
        display: block;
        font-size: 19px
    }

    .tabbar .on {
        color: var(--tab-on);
        font-weight: 700
    }
}

/* ---- page: poem ---- */
[data-page="poem"] .work {
    padding: 26px 30px 20px;
    margin-bottom: 18px
}

[data-page="poem"] .work .top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--mut)
}

[data-page="poem"] .work h1 {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.15;
    margin: 14px 0 4px
}

[data-page="poem"] .work .sub {
    font-size: 15px;
    color: var(--mut);
    margin-bottom: 16px
}

[data-page="poem"] .byline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-top: 1px solid var(--bd2);
    border-bottom: 1px solid var(--bd2)
}

/* an author's photo links to their page wherever it appears next to their name;
   the anchor takes the image's place in the flex row without adding line-height space */
a.avlink {
    display: block;
    flex: none;
    line-height: 0
}

[data-page="poem"] .byline img.av {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover
}

[data-page="poem"] .byline .n {
    font-size: 19px;
    font-weight: 800
}

[data-page="poem"] .byline .m {
    font-size: 13px;
    color: var(--mut)
}

/* the co-author line reads 2px larger than the source line (plan 018) */
[data-page="poem"] .byline .coauthor {
    font-size: 15px
}

[data-page="poem"] .byline .sp,
[data-page="poem"] .acts-bar .sp {
    margin-right: auto;
    display: flex;
    gap: 9px;
    align-items: center
}

/* like / follow / share / edit under the tags: centred, above a thin coral rule */
[data-page="poem"] .acts-bar {
    border-top: 1px solid var(--coral);
    padding-top: 14px;
    margin-bottom: 18px
}

[data-page="poem"] .acts-bar .sp {
    margin-right: 0;
    justify-content: center
}

[data-page="poem"] .work img.hero {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: 12px;
    margin: 18px 0 6px
}

[data-page="poem"] .cap {
    font-size: 12px;
    color: var(--mut);
    margin-bottom: 18px
}

[data-page="poem"] .abst {
    background: var(--bg);
    border-radius: 12px;
    padding: 15px 17px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink2);
    margin-bottom: 22px
}

[data-page="poem"] .abst b {
    display: block;
    font-size: 12px;
    color: var(--mut);
    font-weight: 700;
    letter-spacing: .05em;
    margin-bottom: 5px
}

[data-page="poem"] .poem {
    font-family: Heebo, Arial, sans-serif;
    font-size: clamp(8px, var(--poem-size, 17px), 72px);
    line-height: 1.85;
    color: var(--poem-ink);
    margin: 6px 0 22px
}

[data-page="poem"] .audio {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--bg);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px
}

[data-page="poem"] .audio .play {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--on-acc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex: none
}

[data-page="poem"] .audio .bar {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: var(--track);
    position: relative
}

[data-page="poem"] .audio .bar b {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    height: 100%;
    width: 34%;
    background: var(--acc);
    border-radius: 3px;
    display: block
}

[data-page="poem"] .audio .t {
    font-size: 13px;
    color: var(--mut);
    flex: none
}

[data-page="poem"] .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    font-size: 14px;
    color: var(--mut);
    margin-bottom: 16px
}

[data-page="poem"] .meta b {
    color: var(--ink3);
    font-weight: 600
}

[data-page="poem"] .note {
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink2)
}

[data-page="poem"] .note h5 {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 7px
}

[data-page="poem"] .note.ed {
    background: var(--note-ed-bg);
    border: 1px solid var(--note-ed-bd);
    border-right: 4px solid var(--coral)
}

[data-page="poem"] .note.ai {
    background: var(--acc-t);
    border: 1px solid var(--acc-b)
}

[data-page="poem"] .note.ai .more {
    font-size: 13px;
    font-weight: 700;
    color: var(--acc-d);
    margin-top: 8px;
    display: inline-block
}

/* the story behind the font (plan 014) - same look as .abst */
[data-page="poem"] .font-about {
    background: var(--bg);
    border-radius: 12px;
    padding: 15px 17px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink2);
    margin-bottom: 22px
}

[data-page="poem"] .font-about .hd b {
    color: var(--ink);
    font-weight: 800
}

[data-page="poem"] .font-about .desc {
    color: var(--mut);
    font-size: 14px
}

[data-page="poem"] .font-about summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: var(--acc-d);
    margin-top: 6px
}

[data-page="poem"] .font-about .about {
    margin-top: 8px
}

[data-page="poem"] .font-about .more {
    margin-top: 8px
}

[data-page="poem"] .font-about .more a {
    color: var(--acc-d);
    font-weight: 700;
    word-break: break-all
}

[data-page="poem"] .tune {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--ink2);
    background: var(--warn-t);
    border: 1px solid var(--warn-b);
    border-radius: 12px;
    padding: 13px 16px;
    margin-bottom: 18px
}

[data-page="poem"] .tune .tune-title {
    font-weight: 700
}

[data-page="poem"] .tune .music-details {
    margin-top: 6px;
    font-size: 15px;
    color: var(--mut)
}

/* where to listen: one centred row of icon + label links under the tune box / clip (plan 020) */
[data-page="poem"] .music-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 22px;
    margin: -4px 0 18px
}

[data-page="poem"] .music-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    min-width: 72px;
    padding: 8px 6px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.2;
    color: var(--ink2);
    text-decoration: none
}

[data-page="poem"] .music-links a:hover {
    background: var(--acc-t);
    color: var(--acc)
}

[data-page="poem"] .music-links img {
    width: 36px;
    height: 36px;
    object-fit: contain
}

[data-page="poem"] .bigacts {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--bd2);
    padding-top: 15px
}

[data-page="poem"] .bigacts .a {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink3)
}

[data-page="poem"] .bigacts .a.on {
    background: var(--act-on-bg);
    border-color: var(--coral-b);
    color: var(--coral)
}

[data-page="poem"] .bigacts .sp {
    margin-right: auto;
    font-size: 13px;
    color: var(--mut)
}

[data-page="poem"] .cmts {
    padding: 22px 26px;
    margin-bottom: 18px
}

[data-page="poem"] .cbox {
    display: flex;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--bd2)
}

[data-page="poem"] .cbox:last-of-type {
    border: 0
}

[data-page="poem"] .cbox img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

[data-page="poem"] .cbox .n {
    font-size: 15px;
    font-weight: 800
}

[data-page="poem"] .cbox .d {
    font-size: 12px;
    color: var(--mut);
    margin-bottom: 6px
}

[data-page="poem"] .cbox p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink2)
}

[data-page="poem"] .cbox .re {
    font-size: 13px;
    font-weight: 700;
    color: var(--acc);
    margin-top: 7px;
    display: inline-block
}

[data-page="poem"] .addc {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--bd2)
}

[data-page="poem"] .addc img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

[data-page="poem"] .addc .f {
    flex: 1
}

[data-page="poem"] .addc .fake {
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--mut);
    font-size: 15px;
    min-height: 76px
}

/* ---- poem comments: mirror the classic (Bootstrap) tree layout ----
   templates/includes/poetry/{poem_comments,comment_node,comment_form}.html are shared with
   the classic theme and rely on Bootstrap utilities (card-body, border-end, pe-3, mb-3, ...)
   that this theme does not load. These rules give them the same look. */
[data-page="poem"] .cmts .card {
    background: none;
    border-radius: 0;
    box-shadow: none
}

[data-page="poem"] .cmts .card-body {
    padding: 4px 2px
}

[data-page="poem"] .cmts .card-title {
    font-family: Heebo, Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 14px
}

[data-page="poem"] .cmts #comments-root {
    margin-bottom: 22px
}

/* one node: text, meta line, reply link, then its children indented under a right-hand rule */
[data-page="poem"] .cmts .comment-node {
    border-right: 1px solid var(--bd);
    padding-right: 16px;
    margin-bottom: 18px
}

[data-page="poem"] .cmts .comment-node > .mt-2:first-child {
    font-size: 16px;
    line-height: 1.8;
    color: var(--ink2);
    margin-top: 4px;
    margin-bottom: 6px;
    word-break: break-word
}

[data-page="poem"] .cmts .comment-node small {
    font-size: 14px
}

[data-page="poem"] .cmts .comment-node small strong {
    color: var(--acc);
    font-weight: 800
}

[data-page="poem"] .cmts .comment-node small.text-muted {
    color: var(--mut)
}

[data-page="poem"] .cmts .comment-node a[hx-get] {
    margin-top: 12px;
    font-size: 15px;
    color: var(--ink2);
    border-color: var(--bd) !important;
    background: var(--card) !important;
    border-radius: var(--r-sm) !important;
    padding: 8px 14px !important;
    transition: border-color .15s, color .15s
}

[data-page="poem"] .cmts .comment-node a[hx-get]:hover {
    border-color: var(--acc) !important;
    color: var(--acc)
}

[data-page="poem"] .cmts .comment-node .reply-form:not(:empty) {
    margin: 12px 0
}

[data-page="poem"] .cmts .comment-node [id^="replies-"] {
    margin-top: 16px
}

[data-page="poem"] .cmts .comment-node [id^="replies-"]:empty {
    margin-top: 0
}

[data-page="poem"] .cmts .comment-node [id^="replies-"] .comment-node:last-child {
    margin-bottom: 0
}

/* new-comment form (top level and per-reply) */
[data-page="poem"] .cmts h6 {
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px
}

[data-page="poem"] .cmts form {
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: var(--r-sm);
    padding: 12px
}

[data-page="poem"] .cmts form textarea {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    min-height: 96px
}

[data-page="poem"] .cmts form .mb-2 {
    margin-bottom: 10px
}

[data-page="poem"] .cmts form .text-danger {
    color: var(--danger);
    font-size: 13px;
    margin-top: 6px
}

[data-page="poem"] .cmts form .btn {
    padding: 9px 18px;
    font-size: 14px;
    border-radius: 999px;
    background: var(--acc)
}

[data-page="poem"] .cmts form .btn-outline-secondary {
    background: var(--card);
    color: var(--ink3);
    border: 1px solid var(--bd);
    margin-right: 8px
}

[data-page="poem"] .cmts form .btn-outline-secondary:hover {
    border-color: var(--acc);
    color: var(--acc)
}

@media (max-width: 640px) {
    [data-page="poem"] .cmts .comment-node {
        padding-right: 10px;
        margin-bottom: 14px
    }

    [data-page="poem"] .cmts .comment-node > .mt-2:first-child {
        font-size: 15px
    }
}

[data-page="poem"] .more3 {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 14px
}

[data-page="poem"] .more3 .c {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 12px;
    overflow: hidden
}

[data-page="poem"] .more3 img {
    width: 100%;
    height: 110px;
    object-fit: cover
}

[data-page="poem"] .more3 .in {
    padding: 11px 13px
}

[data-page="poem"] .more3 .t {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35
}

[data-page="poem"] .more3 .s {
    font-size: 12px;
    color: var(--mut);
    margin-top: 4px
}

@media (max-width: 640px) {
    [data-page="poem"] .work {
        padding: 18px 16px 14px
    }

    [data-page="poem"] .work h1 {
        font-size: 28px
    }

    [data-page="poem"] .work img.hero {
        height: 200px
    }

    [data-page="poem"] .poem {
        line-height: 1.75
    }

    [data-page="poem"] .cmts {
        padding: 16px
    }

    [data-page="poem"] .more3 {
        grid-template-columns:1fr 1fr;
        gap: 10px
    }

    [data-page="poem"] .bigacts .a {
        padding: 8px 13px;
        font-size: 13px
    }
}

/* ---- page: list ---- */
[data-page="list"] .filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: 18px
}

[data-page="list"] .filters .lbl {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink3)
}

[data-page="list"] .sel {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--ink3);
    background: var(--card)
}

/* "מיון לפי": every field is a link that flips its own direction, so each one needs to read
   as clickable inside the pill the whole list shares. The arrow points the way the list runs
   and is part of the link, not a separate control. */
[data-page="list"] .filters .sorts {
    gap: 4px
}

[data-page="list"] .sortlink {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
    white-space: nowrap
}

[data-page="list"] .sortlink .arr {
    font-size: 15px;
    line-height: 1;
    color: var(--acc)
}

[data-page="list"] .filters .sp {
    margin-right: auto;
    font-size: 14px;
    color: var(--mut)
}

/* a composed work, wherever a work is listed: the details page's tune box tint (plans 022 / 023) */
.tuneb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--warn-t);
    border: 1px solid var(--warn-b);
    color: var(--warn);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 11px
}

[data-page="list"] .warnb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--warn-t);
    border: 1px solid var(--warn-b);
    color: var(--warn);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 11px
}

[data-page="list"] .wcard {
    display: grid;
    grid-template-columns:270px 1fr;
    gap: 22px;
    padding: 20px;
    margin-bottom: 18px;
    align-items: start
}

[data-page="list"] .wcard img.th {
    width: 100%;
    height: 186px;
    object-fit: cover;
    border-radius: 14px
}

[data-page="list"] .wcard .head {
    display: flex;
    gap: 9px;
    align-items: center
}

[data-page="list"] .wcard h3 {
    font-size: 24px;
    font-weight: 800;
    margin: 11px 0 6px
}

[data-page="list"] .wcard .byline {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px
}

/* "בשיתוף עם ..." - its own line right under the author (plan 016) */
[data-page="list"] .wcard .coauthor {
    font-size: 14px;
    color: var(--mut);
    margin: -4px 0 8px
}

[data-page="list"] .wcard p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink2)
}

[data-page="list"] .wcard .by {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--mut);
    margin-top: 11px
}

[data-page="list"] .wcard .by img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

[data-page="list"] .pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 6px 0 4px
}

[data-page="list"] .pager a {
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--ink3);
    padding: 0 12px
}

[data-page="list"] .pager a.on {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--on-acc);
    font-weight: 700
}

/* Header search: authors whose name / stage name matches, above the works (list_poems.found_authors).
   .fauth: photo + long display name on one row, the bio (cut by the view, with a link to the
   full page) under it, then the latest works in two columns with small thumbnails. */
[data-page="list"] .found-authors {
    margin-bottom: 22px
}

[data-page="list"] .fauth {
    padding: 20px 24px;
    margin-bottom: 36px
}

[data-page="list"] .fauth .who {
    display: flex;
    align-items: center;
    gap: 20px
}

[data-page="list"] .fauth .av {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--card);
    box-shadow: var(--shadow-av);
    flex: none
}

[data-page="list"] .fauth .av.nopic {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg2);
    color: var(--mut);
    font-size: 56px
}

[data-page="list"] .fauth h2.n {
    font-size: 26px;
    font-weight: 900;
    margin: 0;
    line-height: 1.3
}

/* birth - death years under the name (plan 056) */
[data-page="list"] .fauth h3.years {
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0 0
}

/* the bio: the author page's .card.bio look (katan_author.html), with room above and below */
[data-page="list"] .fauth .bio {
    margin: 0 0 24px;
    padding: 10px 24px 20px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink2)
}

[data-page="list"] .fauth .more-link {
    display: inline-block;
    margin-top: 12px;
    font-weight: 700
}

[data-page="list"] .fauth .works {
    margin-top: 24px
}

[data-page="list"] .fauth .works .sec-t {
    margin-top: 0;
    margin-bottom: 6px
}

[data-page="list"] .fauth .wlist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 4px 20px
}

[data-page="list"] .fauth .wlist .row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 0
}

[data-page="list"] .fauth .wlist img,
[data-page="list"] .fauth .wlist .nopic {
    display: block;
    width: 48px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex: none
}

[data-page="list"] .fauth .wlist .t {
    font-size: 16px;
    font-weight: 400
}

[data-page="list"] .fauth .wlist .s {
    font-size: 13px;
    font-weight: 400;
    color: var(--mut)
}

@media (max-width: 860px) {
    [data-page="list"] .fauth {
        padding: 14px 16px;
        margin-bottom: 26px
    }

    [data-page="list"] .fauth .av {
        width: 96px;
        height: 96px
    }

    [data-page="list"] .fauth h2.n {
        font-size: 21px
    }
}


@media (max-width: 640px) {
    [data-page="list"] .filters {
        padding: 13px 14px;
        gap: 8px
    }

    [data-page="list"] .filters .sp {
        display: none
    }

    [data-page="list"] .wcard {
        grid-template-columns:1fr;
        gap: 14px;
        padding: 16px
    }

    [data-page="list"] .wcard img.th {
        height: 190px
    }

    [data-page="list"] .wcard h3 {
        font-size: 21px
    }
}

/* ---- page: list (tag/hashtag state) ---- */
/* the tag photo keeps the 270px height but its own proportions - the column sizes to the
   photo instead of cropping it into a fixed 360px box; a very wide photo is capped at 480px
   and letterboxed (contain) rather than squashed */
[data-page="list"] .taghead {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: 26px;
    padding: 26px;
    margin-bottom: 18px;
    align-items: start
}

[data-page="list"] .taghead img.pic {
    display: block;
    width: auto;
    height: 270px;
    max-width: 480px;
    object-fit: contain;
    border-radius: 14px
}

[data-page="list"] .taghead h1 {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.2
}

[data-page="list"] .taghead h1 b {
    color: var(--acc)
}

[data-page="list"] .taghead .count {
    font-size: 14px;
    color: var(--mut);
    margin-top: 8px
}

[data-page="list"] .taghead .desc {
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink2);
    margin-top: 14px
}

[data-page="list"] .taghead .desc p {
    margin-bottom: 10px
}

[data-page="list"] .taghead .desc strong {
    color: var(--ink)
}

[data-page="list"] .taghead .desc a {
    color: var(--acc);
    font-weight: 700
}

[data-page="list"] .taghead .rel {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 16px;
    border-top: 1px solid var(--bd2);
    padding-top: 14px
}

[data-page="list"] .taghead .rel .lbl {
    font-size: 13px;
    color: var(--mut);
    font-weight: 700
}

/* the "add a work with this tag / hashtag" banner - same tint + coral bar as .spechead;
   inside .taghead it follows the description, without a picture it sits under the page title */
[data-page="list"] .addban {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 18px;
    background: var(--acc-t);
    border: 1px solid var(--acc-b);
    border-right: 6px solid var(--coral);
    border-radius: var(--r);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--acc-d);
    text-decoration: none;
    transition: transform .15s, box-shadow .15s
}

[data-page="list"] .addban:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover)
}

[data-page="list"] .addban .ico {
    flex: none;
    width: 20px;
    height: 20px
}

[data-page="list"] .addban b {
    color: var(--acc);
    font-weight: 800;
    text-decoration: underline
}

[data-page="list"] .sortonly {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 18px
}

[data-page="list"] .sortonly .lbl {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink3)
}

[data-page="list"] .sortonly .sp {
    margin-right: auto;
    font-size: 13px;
    color: var(--mut)
}

@media (max-width: 640px) {
    [data-page="list"] .taghead {
        grid-template-columns:1fr;
        gap: 16px;
        padding: 16px
    }

    [data-page="list"] .taghead img.pic {
        height: 200px;
        max-width: 100%;
        justify-self: center
    }

    [data-page="list"] .taghead h1 {
        font-size: 25px
    }

    [data-page="list"] .taghead .desc {
        font-size: 15px
    }

    [data-page="list"] .sortonly {
        padding: 12px 14px
    }

    [data-page="list"] .sortonly .sp {
        display: none
    }
}

/* ---- page: author ---- */
[data-page="author"] .cover {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    height: 240px;
    margin-top: 18px
}

[data-page="author"] .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

[data-page="author"] .cover .veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--cover-veil-from), var(--cover-veil-to))
}

/* The mockup hung the profile card and its avatar over a .cover banner, so both carry a
   negative top margin. The real template renders no .cover, and those offsets dragged the
   avatar up under the sticky search bar, which clipped it. Keep the overlap only when a
   cover is actually there to overlap. */
[data-page="author"] .prof {
    display: flex;
    align-items: flex-end;
    gap: 18px;
    margin: 18px 0;
    padding: 16px 26px 18px;
    position: relative;
    z-index: 2
}

[data-page="author"] .cover + .prof {
    margin-top: -34px
}

[data-page="author"] .prof img.av {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--card);
    flex: none
}

[data-page="author"] .cover + .prof img.av {
    margin-top: -86px
}

[data-page="author"] .prof .n h1 {
    font-size: 32px;
    font-weight: 900
}

/* birth - death years under the name (plan 055) */
[data-page="author"] .prof .n h3.years {
    font-size: 18px;
    font-weight: 700;
    margin: 2px 0 0
}

[data-page="author"] .prof .n .m {
    font-size: 14px;
    color: var(--mut);
    margin-top: 2px
}

[data-page="author"] .prof .sp {
    margin-right: auto;
    display: flex;
    gap: 9px
}

/* "יוצר זה העלה לאתר NN יצירות:" + a line per type (plan 107); the same block in /me's hello card (plan 108) */
[data-page="author"] .prof .n .works-by-type,
[data-page="me"] .hello .works-by-type {
    margin-top: 8px;
    font-size: 14px
}

[data-page="author"] .prof .n .works-by-type .intro,
[data-page="me"] .hello .works-by-type .intro {
    color: var(--mut)
}

[data-page="author"] .prof .n .works-by-type ul,
[data-page="me"] .hello .works-by-type ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px
}

[data-page="author"] .prof .n .works-by-type li a,
[data-page="me"] .hello .works-by-type li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    font-weight: 700
}

[data-page="author"] .prof .n .works-by-type li a:hover span:last-child,
[data-page="me"] .hello .works-by-type li a:hover span:last-child {
    text-decoration: underline
}

/* the type's picture sits in a coral frame (.pt-frame) rather than having the border itself: the dark-mode
   inversion of the picture (plan 127) would recolour its own border, not the wrapper's */
[data-page="author"] .prof .n .works-by-type .pt-frame,
[data-page="me"] .hello .works-by-type .pt-frame,
[data-page="author"] .prof .n .works-by-type .nopic,
[data-page="me"] .hello .works-by-type .nopic {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--coral);
    overflow: hidden;
    flex: none;
    display: block
}

[data-page="author"] .prof .n .works-by-type .pt-frame img,
[data-page="me"] .hello .works-by-type .pt-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

[data-page="author"] .stats {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 1px;
    background: var(--bd);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 18px
}

[data-page="author"] .stats div {
    background: var(--card);
    padding: 16px;
    text-align: center
}

[data-page="author"] .stats b {
    display: block;
    font-size: 24px;
    font-weight: 900
}

[data-page="author"] .stats span {
    font-size: 13px;
    color: var(--mut)
}

/* the moto, centred and flanked by two oversized coral quotation marks. The marks are
   inline rather than absolutely positioned so they centre with the text and cannot clip;
   line-height:0 keeps them from inflating the line box at that size. */
[data-page="author"] .quote {
    font-family: "Frank Ruhl Libre", Georgia, serif;
    font-size: 22px;
    line-height: 1.65;
    color: var(--ink);
    text-align: center;
    padding: 6px 0;
    margin: 0 auto 18px;
    max-width: 760px
}

[data-page="author"] .quote::before, [data-page="author"] .quote::after {
    font-family: Georgia, "Frank Ruhl Libre", serif;
    font-size: 46px;
    line-height: 0;
    color: var(--coral);
    vertical-align: -.28em;
    font-weight: 700
}

[data-page="author"] .quote::before {
    content: "\201D";
    margin-inline-end: 10px
}

/* RTL: opening, on the right */
[data-page="author"] .quote::after {
    content: "\201C";
    margin-inline-start: 10px
}

/* RTL: closing, on the left  */
[data-page="author"] .bio {
    padding: 20px 24px;
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink2)
}

[data-page="author"] .tabs {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid var(--bd);
    margin-bottom: 18px;
    overflow: auto
}

[data-page="author"] .tabs a {
    padding: 12px 16px;
    font-size: 15px;
    color: var(--mut);
    font-weight: 600;
    white-space: nowrap
}

[data-page="author"] .tabs a.on {
    color: var(--acc);
    border-bottom: 3px solid var(--acc)
}

/* "היצירות האחרונות" and "היצירות הפופולאריות" share one row, equal width. align-items:start
   so the shorter list does not stretch; they stack again when there is no room for two. */
[data-page="author"] .worklists {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 22px;
    align-items: start
}

@media (max-width: 860px) {
    [data-page="author"] .worklists {
        grid-template-columns:1fr;
        gap: 0
    }
}

/* "לכל היצירות של ..." under the two lists (plan 017) */
[data-page="author"] .all-works {
    text-align: center;
    margin: 4px 0 26px
}

[data-page="author"] .wlist .row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 12px
}

[data-page="author"] .wlist img {
    width: 92px;
    height: 70px;
    border-radius: 10px;
    object-fit: cover;
    flex: none
}

/* a poem with no picture keeps an empty slot, so every title starts at the same place */
[data-page="author"] .wlist .nopic {
    display: block;
    width: 92px;
    height: 70px;
    flex: none
}

[data-page="author"] .wlist .t {
    font-size: 18px;
    font-weight: 800
}

[data-page="author"] .wlist .s {
    font-size: 13px;
    color: var(--mut);
    margin-top: 3px
}

[data-page="author"] .wlist .lk {
    margin-right: auto;
    text-align: center;
    flex: none
}

[data-page="author"] .wlist .lk b {
    display: block;
    font-size: 19px;
    font-weight: 900;
    color: var(--coral)
}

[data-page="author"] .wlist .lk span {
    font-size: 11px;
    color: var(--mut)
}

[data-page="author"] .social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 18px 20px
}

[data-page="author"] .social a {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 14px;
    color: var(--ink3)
}

@media (max-width: 640px) {
    [data-page="author"] .cover {
        height: 150px;
        border-radius: 14px
    }

    /* no .cover on the real page: the overlap offsets apply only with one, as on desktop (plan 074) */
    [data-page="author"] .prof {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 14px 0;
        padding: 14px
    }

    [data-page="author"] .cover + .prof {
        margin-top: -26px
    }

    [data-page="author"] .prof img.av {
        width: 92px;
        height: 92px;
        border-width: 4px
    }

    [data-page="author"] .cover + .prof img.av {
        margin-top: -62px
    }

    [data-page="author"] .prof .n h1 {
        font-size: 24px
    }

    [data-page="author"] .prof .sp {
        margin: 0;
        width: 100%
    }

    [data-page="author"] .prof .sp a {
        flex: 1;
        text-align: center
    }

    [data-page="author"] .stats {
        grid-template-columns:repeat(2, 1fr)
    }

    [data-page="author"] .quote {
        font-size: 19px
    }

    [data-page="author"] .bio {
        padding: 16px;
        font-size: 15px
    }

    [data-page="author"] .wlist img, [data-page="author"] .wlist .nopic {
        width: 70px;
        height: 56px
    }

    [data-page="author"] .wlist .t {
        font-size: 16px
    }
}

/* ---- page: me ---- */
[data-page="me"] .hello {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    margin-bottom: 18px
}

[data-page="me"] .hello img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover
}

[data-page="me"] .hello h1 {
    font-size: 26px;
    font-weight: 900
}

[data-page="me"] .hello .m {
    font-size: 14px;
    color: var(--mut);
    margin-top: 2px
}

[data-page="me"] .hello .sp {
    margin-right: auto;
    display: flex;
    gap: 9px;
    flex-wrap: wrap
}

/* seven tiles on one row (plan 096): minmax(0, 1fr) lets a cell shrink under its text, which then wraps */
[data-page="me"] .tiles {
    display: grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px
}

/* > *: the four works tiles are links that filter the works table (plan 117), the other three stay divs */
[data-page="me"] .tiles > * {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 11px 8px;
    text-align: center;
    min-width: 0
}

[data-page="me"] .tiles a {
    color: inherit;
    text-decoration: none;
    display: block
}

[data-page="me"] .tiles a:hover {
    border-color: var(--acc-b)
}

[data-page="me"] .tiles b {
    display: block;
    font-size: 22px;
    font-weight: 900
}

[data-page="me"] .tiles span {
    font-size: 11px;
    color: var(--mut);
    line-height: 1.25
}

[data-page="me"] .tiles > .hl {
    background: var(--acc-t);
    border-color: var(--acc-b)
}

[data-page="me"] .tbl {
    padding: 18px 20px;
    margin-bottom: 18px
}

[data-page="me"] table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px
}

[data-page="me"] th {
    text-align: right;
    font-size: 12px;
    color: var(--mut);
    font-weight: 700;
    padding: 0 8px 10px;
    border-bottom: 1px solid var(--bd)
}

[data-page="me"] td {
    padding: 13px 8px;
    border-bottom: 1px solid var(--bd2);
    color: var(--ink2)
}

[data-page="me"] tr:last-child td {
    border: 0
}

/* the works table: the title in regular weight, the column heads bold and darker than the
   muted default above, so the heads stand out over the rows */
[data-page="me"] td.t {
    font-weight: 400;
    color: var(--ink)
}

[data-page="me"] #poems th {
    font-weight: 800;
    color: var(--ink2)
}

/* the works table's column heads sort it (plan 106): a link that looks like the head text, with a mark -
   ▲ / ▼ on the sorted column, a faint ↕ on the others. HTMX swaps the table; it dims while loading */
[data-page="me"] #poems th a.sort-h {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer
}

[data-page="me"] #poems th a.sort-h:hover {
    color: var(--acc-d)
}

[data-page="me"] .sort-mark {
    margin-inline-start: 4px;
    font-size: 10px;
    color: var(--mut);
    opacity: .45
}

[data-page="me"] a.sort-h.on .sort-mark {
    color: var(--acc-d);
    opacity: 1
}

[data-page="me"] .me-poems-table.htmx-request,
[data-page="me"] .me-poems-table:has(.htmx-request) {
    opacity: .55;
    transition: opacity .15s
}

/* the share pictures card (plan 106): the author page's and one poem's og:image, as a link preview shows them.
   Three columns - the explanation (20%), then the two pictures (40% each); one under the other on phones */
[data-page="me"] .share-imgs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 2fr);
    gap: 18px;
    align-items: start
}

[data-page="me"] .share-intro {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink2)
}

[data-page="me"] .share-imgs figure {
    margin: 0
}

[data-page="me"] .share-imgs .img {
    display: block;
    aspect-ratio: 1200 / 630;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--bd);
    background: var(--bg)
}

[data-page="me"] .share-imgs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

[data-page="me"] .share-imgs figcaption {
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
    color: var(--ink2)
}

[data-page="me"] .share-imgs .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mut);
    font-size: 14px
}

@media (max-width: 640px) {
    [data-page="me"] .share-imgs {
        grid-template-columns: 1fr
    }
}

[data-page="me"] .st {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 11px;
    white-space: nowrap
}

[data-page="me"] .st.ok {
    background: var(--acc-t);
    color: var(--acc-d)
}

[data-page="me"] .st.draft {
    background: var(--warn-t);
    color: var(--warn)
}

[data-page="me"] .st.wait {
    background: var(--wait-t);
    color: var(--mut)
}

[data-page="me"] .rowacts {
    display: flex;
    gap: 9px;
    justify-content: flex-end;
    font-size: 14px;
    color: var(--mut)
}

[data-page="me"] .people {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0 2px
}

[data-page="me"] .people img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover
}

[data-page="me"] .people .more {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink3)
}

[data-page="me"] .nrow {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--bd2)
}

[data-page="me"] .nrow:last-of-type {
    border: 0
}

[data-page="me"] .nrow img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

[data-page="me"] .nrow .t {
    font-size: 15px;
    line-height: 1.45
}

[data-page="me"] .nrow .t b {
    font-weight: 800
}

[data-page="me"] .nrow .d {
    font-size: 12px;
    color: var(--mut);
    margin-top: 2px
}

[data-page="me"] .nrow .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--coral);
    margin-right: auto;
    flex: none
}

[data-page="me"] .two {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 18px;
    margin-bottom: 18px
}

[data-page="me"] .two .card {
    padding: 18px 20px
}

/* .sec-t.band: the section title as a filled band, as on the homepage ('.h2.band') - the
   news card's header colours, negative margins that cancel the card's padding (18px 20px on
   both .tbl and .two .card), the card's top radius, and the red line at the far left end. */
[data-page="me"] .card > .sec-t.band {
    margin: -18px -20px 18px;
    padding: 14px 20px;
    background: var(--acc-t);
    border-bottom: 1px solid var(--acc-b);
    border-radius: var(--r) var(--r) 0 0;
    color: var(--acc-d)
}

[data-page="me"] .sec-t.band i {
    margin-right: auto
}

/* pager of the unread notifications - the list page's (the pager rules are per page) */
[data-page="me"] .pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 4px
}

[data-page="me"] .pager a {
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--ink3);
    padding: 0 12px
}

[data-page="me"] .pager a.on {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--on-acc);
    font-weight: 700
}

@media (max-width: 640px) {
    [data-page="me"] .hello {
        flex-wrap: wrap;
        padding: 16px
    }

    [data-page="me"] .hello img {
        width: 52px;
        height: 52px
    }

    [data-page="me"] .hello h1 {
        font-size: 21px
    }

    [data-page="me"] .hello .sp {
        width: 100%;
        margin: 6px 0 0
    }

    [data-page="me"] .hello .sp a {
        flex: 1;
        text-align: center
    }

    [data-page="me"] .tiles {
        grid-template-columns:repeat(3, 1fr);
        gap: 9px
    }

    [data-page="me"] .tiles b {
        font-size: 21px
    }

    [data-page="me"] .two {
        grid-template-columns:1fr
    }

    [data-page="me"] .tbl {
        padding: 14px
    }

    [data-page="me"] .tbl > .sec-t.band {
        margin: -14px -14px 14px;
        padding: 12px 14px
    }

    [data-page="me"] table {
        font-size: 14px
    }

    /* the works table keeps all its columns on phones (plan 109): a minimum width, so the cells keep their
       proportions and the wrapper (overflow-x:auto in _me_poems_table.html) scrolls sideways */
    [data-page="me"] .me-poems-table table {
        min-width: 640px
    }

    [data-page="me"] .me-poems-table > div {
        -webkit-overflow-scrolling: touch
    }
}

/* ---- page: article ---- */
/* the hero is a card: the title at the top right, the photo on the left. The photo keeps
   its own size and proportions (never cropped, stretched, filtered or upscaled; only
   shrunk, up to 60% of the card, when it is wider than that). */
[data-page="article"] .ahero {
    display: flex;
    align-items: flex-start;
    gap: 26px;
    padding: 26px;
    margin: 18px 0
}

[data-page="article"] .ahero .in {
    flex: 1 1 0;
    min-width: 0
}

/* direct child only: the author avatar inside .ahero .ameta must not inherit the 60%
   max-width, or its shrink-to-fit link wrapper squeezes the circle into an ellipse */
[data-page="article"] .ahero > img {
    display: block;
    flex: none;
    width: auto;
    max-width: 60%;
    height: auto;
    max-height: 275px;
    border-radius: 14px
}

[data-page="article"] .ahero h1 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
    margin: 13px 0 10px;
    color: var(--ink)
}

[data-page="article"] .ahero p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink2)
}

[data-page="article"] .ameta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    margin: 18px 0
}

[data-page="article"] .ameta img {
    width: 44px;
    height: 44px;
    max-width: none;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

[data-page="article"] .ameta .n {
    font-size: 16px;
    font-weight: 800
}

[data-page="article"] .ameta .d {
    font-size: 13px;
    color: var(--mut)
}

[data-page="article"] .ameta .sp {
    margin-right: auto;
    display: flex;
    gap: 9px;
    font-size: 14px;
    color: var(--mut)
}

/* inside the hero card, under the title: no card padding of its own */
[data-page="article"] .ahero .ameta {
    padding: 0;
    margin: 16px 0 0;
    flex-wrap: wrap
}

[data-page="article"] .ahero .abst {
    margin: 18px 0 0
}

[data-page="article"] .body {
    padding: 26px 34px;
    margin-bottom: 18px
}

[data-page="article"] .abst {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink2);
    margin-bottom: 22px
}

[data-page="article"] .abst b {
    display: block;
    font-size: 12px;
    color: var(--mut);
    letter-spacing: .05em;
    margin-bottom: 5px
}

[data-page="article"] .body h2 {
    font-size: 26px;
    font-weight: 900;
    margin: 26px 0 10px
}

[data-page="article"] .body p {
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink2);
    margin-bottom: 14px
}

[data-page="article"] .body ol {
    margin: 0 20px 16px 0;
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink2)
}

[data-page="article"] .body li {
    margin-bottom: 6px
}

[data-page="article"] .body figure {
    margin: 22px 0
}

[data-page="article"] .body figure img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px
}

[data-page="article"] .body figcaption {
    font-size: 12px;
    color: var(--mut);
    margin-top: 7px
}

[data-page="article"] .pull {
    font-family: "Frank Ruhl Libre", Georgia, serif;
    font-size: 24px;
    line-height: 1.6;
    color: var(--ink);
    border-right: 4px solid var(--coral);
    padding: 6px 20px 6px 0;
    margin: 22px 0
}

[data-page="article"] .aboutbox {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 18px
}

[data-page="article"] .aboutbox img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

[data-page="article"] .aboutbox .t {
    font-size: 17px;
    font-weight: 800;
    margin-bottom: 5px
}

[data-page="article"] .aboutbox p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink2)
}

[data-page="article"] .ctabox {
    background: linear-gradient(155deg, var(--cta-from), var(--cta-to));
    color: var(--on-dark);
    border-radius: var(--r);
    padding: 26px 30px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

[data-page="article"] .ctabox h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--on-dark)
}

[data-page="article"] .ctabox p {
    font-size: 15px;
    color: var(--on-dark-mut);
    margin-top: 6px
}

[data-page="article"] .ctabox a {
    margin-right: auto
}

@media (max-width: 640px) {
    [data-page="article"] .ahero {
        flex-direction: column;
        gap: 14px;
        padding: 16px
    }

    [data-page="article"] .ahero .in {
        flex: none
    }

    [data-page="article"] .ahero > img {
        max-width: 100%;
        max-height: none;
        align-self: center
    }

    [data-page="article"] .ahero h1 {
        font-size: 26px
    }

    [data-page="article"] .ahero p {
        font-size: 15px
    }

    [data-page="article"] .ameta {
        padding: 14px;
        flex-wrap: wrap
    }

    [data-page="article"] .ahero .ameta {
        padding: 0
    }

    [data-page="article"] .ameta .sp {
        width: 100%;
        margin: 6px 0 0
    }

    [data-page="article"] .body {
        padding: 18px 16px
    }

    [data-page="article"] .body h2 {
        font-size: 21px
    }

    [data-page="article"] .body p, [data-page="article"] .body ol {
        font-size: 16px
    }

    [data-page="article"] .body figure img {
        height: 190px
    }

    [data-page="article"] .pull {
        font-size: 20px
    }

    [data-page="article"] .ctabox {
        padding: 20px 18px
    }

    [data-page="article"] .ctabox h3 {
        font-size: 20px
    }

    [data-page="article"] .aboutbox {
        padding: 16px;
        flex-direction: column
    }
}

/* ---- page: articles ---- */
[data-page="articles"] .single {
    padding: 22px 0 34px
}

[data-page="articles"] .abar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin: 18px 0
}

[data-page="articles"] .abar .lbl {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink3)
}

[data-page="articles"] .abar .sp {
    margin-right: auto;
    font-size: 14px;
    color: var(--mut)
}

[data-page="articles"] .agrid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 22px
}

[data-page="articles"] .acard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0
}

/* the search field (plan 070) hides cards with [hidden], which display:flex would otherwise beat */
[data-page="articles"] .acard[hidden] {
    display: none
}

/* the picture keeps its own height instead of being cropped to a fixed band. The link that
   wraps it is the flex item, so that is what must not shrink down the column axis. */
[data-page="articles"] .acard > a {
    flex: none
}

[data-page="articles"] .acard img {
    width: 100%;
    height: auto;
    display: block
}

[data-page="articles"] .acard .in {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1
}

[data-page="articles"] .acard h3 {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3
}

[data-page="articles"] .acard .au {
    font-size: 13px;
    color: var(--mut);
    border: 0;
    padding: 5px 0 0;
    display: block
}

[data-page="articles"] .acard p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink2);
    margin: 11px 0 14px
}

[data-page="articles"] .acard .chips {
    margin-top: auto
}

/* the link sits at the card's bottom whether or not the card has tags: with tags, .chips takes the
   free space and the link keeps 14px under them; without (most /help/ guides), the link takes it (plan 072) */
[data-page="articles"] .acard .go {
    display: inline-block;
    margin-top: auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--acc)
}

[data-page="articles"] .acard .chips + .go {
    margin-top: 14px
}

[data-page="articles"] .pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 24px 0 6px
}

[data-page="articles"] .pager a {
    min-width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--ink3);
    padding: 0 12px
}

[data-page="articles"] .pager a.on {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--on-acc);
    font-weight: 700
}

[data-page="articles"] .ctabox {
    background: linear-gradient(155deg, var(--cta-from), var(--cta-to));
    color: var(--on-dark);
    border-radius: var(--r);
    padding: 26px 30px;
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

[data-page="articles"] .ctabox h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--on-dark)
}

[data-page="articles"] .ctabox p {
    font-size: 15px;
    color: var(--on-dark-mut);
    margin-top: 6px
}

[data-page="articles"] .ctabox a {
    margin-right: auto
}

@media (max-width: 640px) {
    [data-page="articles"] .agrid {
        grid-template-columns:1fr;
        gap: 16px
    }

    [data-page="articles"] .abar {
        padding: 13px 14px
    }

    [data-page="articles"] .abar .sp {
        display: none
    }

    [data-page="articles"] .ctabox {
        padding: 20px 18px
    }

    [data-page="articles"] .ctabox h3 {
        font-size: 20px
    }
}

/* ---- page: page ---- */
[data-page="page"] .single {
    padding: 22px 0 34px;
    display: grid;
    grid-template-columns:1fr 280px;
    gap: 26px;
    align-items: start
}

[data-page="page"] .doc {
    padding: 34px 40px 30px
}

[data-page="page"] .doc .lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--acc);
    letter-spacing: .06em
}

[data-page="page"] .doc h1 {
    font-size: 36px;
    font-weight: 900;
    line-height: 1.2;
    margin: 10px 0 8px
}

[data-page="page"] .doc .by {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--mut);
    border-bottom: 1px solid var(--bd2);
    padding-bottom: 16px;
    margin-bottom: 8px
}

[data-page="page"] .doc .by img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover
}

[data-page="page"] .doc .lead {
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink2);
    margin: 18px 0 6px
}

[data-page="page"] .doc section {
    padding: 18px 0;
    border-bottom: 1px solid var(--bd2)
}

[data-page="page"] .doc section:last-of-type {
    border: 0
}

[data-page="page"] .doc h2 {
    font-size: 21px;
    font-weight: 800;
    margin-bottom: 10px
}

[data-page="page"] .doc p {
    font-size: 16px;
    line-height: 1.9;
    color: var(--ink2);
    margin-bottom: 8px
}

[data-page="page"] .doc p b {
    color: var(--ink)
}

[data-page="page"] .doc .upd {
    font-size: 14px;
    color: var(--mut);
    background: var(--bg);
    border-radius: 12px;
    padding: 13px 16px;
    margin-top: 20px
}

[data-page="page"] .toc {
    padding: 20px;
    position: sticky;
    top: 86px
}

[data-page="page"] .toc h4 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px
}

[data-page="page"] .toc h4 i {
    width: 30px;
    height: 4px;
    background: var(--coral);
    border-radius: 2px;
    display: inline-block;
    flex: none;
    order: 1
}

[data-page="page"] .toc a {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink3);
    padding: 6px 0;
    border-right: 2px solid transparent;
    padding-right: 10px
}

[data-page="page"] .toc a.on {
    color: var(--acc);
    font-weight: 700;
    border-right-color: var(--acc)
}

[data-page="page"] .rel {
    padding: 20px;
    margin-top: 18px
}

[data-page="page"] .rel h4 {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px
}

[data-page="page"] .rel h4 i {
    width: 30px;
    height: 4px;
    background: var(--coral);
    border-radius: 2px;
    display: inline-block;
    flex: none;
    order: 1
}

[data-page="page"] .rel a {
    display: block;
    font-size: 15px;
    color: var(--ink3);
    padding: 8px 0;
    border-bottom: 1px solid var(--bd2)
}

[data-page="page"] .rel a:last-child {
    border: 0
}

@media (max-width: 640px) {
    [data-page="page"] .single {
        grid-template-columns:1fr;
        gap: 18px
    }

    [data-page="page"] .doc {
        padding: 18px 16px
    }

    [data-page="page"] .doc h1 {
        font-size: 25px
    }

    [data-page="page"] .doc h2 {
        font-size: 19px
    }

    [data-page="page"] .doc p {
        font-size: 15px
    }

    [data-page="page"] .toc {
        position: static
    }
}

/* ---- page: upload ---- */
[data-page="upload"] .steps {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    color: var(--mut);
    margin: 14px 0 0;
    flex-wrap: wrap
}

[data-page="upload"] .steps b {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink);
    font-weight: 700
}

[data-page="upload"] .steps i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--acc);
    color: var(--on-acc);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 700
}

[data-page="upload"] .steps .off i {
    background: var(--track);
    color: var(--on-acc)
}

[data-page="upload"] .form {
    padding: 24px 28px;
    margin-bottom: 18px
}

[data-page="upload"] .fld {
    margin-bottom: 20px;
    /* the fields' borders are a little darker than the site's --bd: the token is redefined for everything
       inside a field, so inputs, textareas, selects and the tags box follow without rules of their own */
    --bd: var(--bd-input)
}

/* the font dropdown (Tom Select) brings its own look - grey border, 3px corners, 8px padding, 13px text -
   on the control and on the opened list. Give both the fields' border, corners, padding and text size, so
   the control is as high as the inputs next to it (48px). The line height is fixed: each option ends with a
   sample in its own font at 150%, which must not make the box taller */
[data-page="upload"] .fld .ts-control {
    border-color: var(--bd);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: 15px;
    line-height: 22px;
    color: var(--ink)
}

[data-page="upload"] .fld .ts-dropdown {
    border: 1px solid var(--bd);
    border-radius: var(--r-sm);
    overflow: hidden;
    font-size: 15px;
    line-height: 22px;
    color: var(--ink)
}

[data-page="upload"] .fld .ts-dropdown .option {
    padding: 8px 14px
}

/* Tom Select's own stylesheet paints the control and the list white (#fff), also in dark mode. Give them the
   form card's background, like every other input on the page (plan 126). Tom Select's open control
   (.ts-wrapper.single.input-active) has four classes, hence the longer selectors */
[data-page="upload"] .fld .ts-control,
[data-page="upload"] .fld .ts-wrapper .ts-control,
[data-page="upload"] .fld .ts-wrapper.single.input-active .ts-control,
[data-page="upload"] .fld .ts-dropdown {
    background: var(--card)
}

[data-page="upload"] .fld .ts-control > input {
    color: var(--ink);
    background: transparent
}

[data-page="upload"] .fld .ts-dropdown .option,
[data-page="upload"] .fld .ts-dropdown .no-results {
    color: var(--ink)
}

[data-page="upload"] .fld .ts-dropdown .active,
[data-page="upload"] .fld .ts-dropdown .option.selected {
    background: var(--acc-t);
    color: var(--ink)
}

/* the poem type dropdown (Tom Select, plan 111): the type's picture before its name, in the list and in the
   closed control. inline-block beats this theme's global "img { display: block }", which would push the name
   to its own line. 26px with vertical-align: middle stays inside the control's 22px line height + padding */
[data-page="upload"] .fld .pt-ico {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    object-fit: cover;
    vertical-align: middle;
    margin-inline-end: 8px;
    margin-top: -2px;
    margin-bottom: -2px
}

[data-page="upload"] .fld label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink3);
    margin-bottom: 7px
}

[data-page="upload"] .fld .req {
    color: var(--coral)
}

[data-page="upload"] .inp {
    border: 1px solid var(--bd);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: 15px;
    color: var(--mut);
    background: var(--card)
}

[data-page="upload"] .inp.filled {
    color: var(--ink)
}

[data-page="upload"] .inp.area {
    min-height: 230px;
    line-height: 1.95;
    font-family: Heebo, Arial, sans-serif;
    font-size: 18px;
    color: var(--ink)
}

[data-page="upload"] .inp.small {
    min-height: 80px
}

[data-page="upload"] .row2 {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px
}

[data-page="upload"] .hint {
    font-size: 12px;
    color: var(--mut);
    margin-top: 6px
}

[data-page="upload"] .toolbar {
    display: flex;
    gap: 4px;
    border: 1px solid var(--bd);
    border-bottom: 0;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    padding: 8px 10px;
    background: var(--bg);
    font-size: 14px;
    color: var(--ink3);
    flex-wrap: wrap
}

[data-page="upload"] .toolbar span {
    padding: 3px 8px;
    border-radius: 6px
}

[data-page="upload"] .toolbar span.on {
    background: var(--card);
    border: 1px solid var(--bd);
    font-weight: 700
}

[data-page="upload"] .toolbar + .inp {
    border-radius: 0 0 var(--r-sm) var(--r-sm)
}

[data-page="upload"] .drop {
    border: 2px dashed var(--bd);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
    color: var(--mut);
    font-size: 14px;
    background: var(--bg)
}

[data-page="upload"] .drop b {
    display: block;
    color: var(--ink3);
    font-size: 15px;
    margin-bottom: 4px
}

[data-page="upload"] .upped {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 10px;
    margin-top: 10px
}

[data-page="upload"] .upped img {
    width: 92px;
    height: 62px;
    border-radius: 8px;
    object-fit: cover
}

[data-page="upload"] .upped .t {
    font-size: 14px;
    font-weight: 700
}

[data-page="upload"] .upped .s {
    font-size: 12px;
    color: var(--mut)
}

[data-page="upload"] .upped a {
    margin-right: auto;
    font-size: 13px;
    color: var(--coral);
    font-weight: 700
}

[data-page="upload"] .radios {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

[data-page="upload"] .radios span {
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    color: var(--ink3)
}

[data-page="upload"] .radios span.on {
    border-color: var(--acc);
    background: var(--acc-t);
    color: var(--acc-d);
    font-weight: 700
}

[data-page="upload"] .tagfield {
    border: 1px solid var(--bd);
    border-radius: var(--r-sm);
    padding: 10px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center
}

[data-page="upload"] .tagfield .t {
    background: var(--acc-t);
    color: var(--acc-d);
    border: 1px solid var(--acc-b);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 14px;
    font-weight: 600
}

[data-page="upload"] .tagfield .t s {
    text-decoration: none;
    color: var(--acc);
    margin-right: 5px
}

[data-page="upload"] .tagfield .ghost {
    color: var(--mut);
    font-size: 14px;
    padding: 6px
}

[data-page="upload"] .stars {
    font-size: 22px;
    color: var(--star);
    letter-spacing: 3px
}

[data-page="upload"] .terms {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--bg);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink2)
}

/* the accept-terms checkbox and its text (a <label>, so undo the .fld label look) */
[data-page="upload"] .terms input[type=checkbox] {
    width: 20px;
    height: 20px;
    flex: none;
    margin-top: 2px;
    cursor: pointer
}

[data-page="upload"] .fld .terms label {
    display: block;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    margin: 0;
    cursor: pointer
}

[data-page="upload"] .terms a {
    color: var(--acc);
    font-weight: 700
}

[data-page="upload"] .formacts {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--bd2);
    padding-top: 18px
}

[data-page="upload"] .formacts .sp {
    margin-right: auto;
    font-size: 13px;
    color: var(--mut)
}

[data-page="upload"] .prev {
    padding: 18px;
    margin-bottom: 18px
}

[data-page="upload"] .prev .in {
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 14px
}

[data-page="upload"] .prev h5 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px
}

[data-page="upload"] .prev h5 i {
    width: 8px;
    height: 8px;
    background: var(--acc);
    border-radius: 2px;
    display: inline-block;
    flex: none
}

[data-page="upload"] .prev img.pic {
    width: 100%;
    height: 96px;
    object-fit: cover;
    border-radius: 9px;
    margin-top: 10px
}

[data-page="upload"] .prev .t {
    font-size: 17px;
    font-weight: 800;
    margin-top: 9px
}

[data-page="upload"] .prev .x {
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.6;
    margin-top: 5px
}

[data-page="upload"] .chk {
    font-size: 14px;
    line-height: 2;
    color: var(--ink2)
}

[data-page="upload"] .chk b {
    color: var(--acc);
    font-weight: 700;
    margin-left: 6px
}

@media (max-width: 640px) {
    [data-page="upload"] .form {
        padding: 16px
    }

    [data-page="upload"] .row2 {
        grid-template-columns:1fr;
        gap: 0
    }

    [data-page="upload"] .inp.area {
        min-height: 190px;
        font-size: 17px
    }

    [data-page="upload"] .steps {
        font-size: 13px;
        gap: 7px
    }

    [data-page="upload"] .formacts a {
        flex: 1;
        text-align: center
    }
}

/* ---- page: tags ---- */
/* margin-inline:auto centres the pill in the page header. The articles / help list has the same
   pill (plan 070), and so has /me's works card (plan 084) */
:is([data-page="tags"], [data-page="articles"], [data-page="me"]) .tsearch {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 13px 20px;
    color: var(--mut);
    font-size: 16px;
    margin: 16px auto 0;
    max-width: 560px
}

/* The real input inherits the pill's own type and colour, so the bar looks unchanged.
   appearance:none drops the chrome the browser puts on type=search once there is text in
   it, and outline/box-shadow:none keep the focus ring off - the pill is the only frame. */
:is([data-page="tags"], [data-page="articles"], [data-page="me"]) .tsearch input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--ink);
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none
}

:is([data-page="tags"], [data-page="articles"], [data-page="me"]) .tsearch input::-webkit-search-decoration,
:is([data-page="tags"], [data-page="articles"], [data-page="me"]) .tsearch input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

:is([data-page="tags"], [data-page="articles"], [data-page="me"]) .tsearch input::placeholder {
    color: var(--mut);
    opacity: 1
}

/* Same focus treatment the navbar's search field gets from 'input:focus' further down -
   accent border plus a 3px tinted ring. It goes on the pill, not on the input: the input
   is transparent and borderless inside it, so the pill is the box the ring should wrap.
   The input's own box-shadow stays suppressed above, so there is only ever one ring. */
:is([data-page="tags"], [data-page="articles"], [data-page="me"]) .tsearch:focus-within {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px var(--acc-t)
}

/* The search reloads on #poems. The nav (70px) and, on wide screens, .searchbar under it are sticky, so
   without a margin the card's title band and the pill land under them and the first row is what shows at
   the top. This is the fallback; katan_me.html measures the two bars and sets the real margin inline. */
[data-page="me"] #poems {
    scroll-margin-top: 170px
}

/* /me: the pill sits inside the works card, between its title and the table (plan 084) */
[data-page="me"] .tsearch {
    flex: 1 1 280px;
    margin: 0;
    max-width: none
}

/* the search icon is the form's submit button: no chrome, so the pill looks like the articles page's */
[data-page="me"] .me-search-go {
    display: inline-flex;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    line-height: 0
}

[data-page="me"] .me-search-go:focus-visible {
    outline: 2px solid var(--acc);
    outline-offset: 2px;
    border-radius: 50%
}

/* the pill and the "חיפוש גם בגוף היצירה" box on one row (plan 086); on a narrow card the box wraps
   under the pill */
[data-page="me"] .me-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px
}

[data-page="me"] .me-search-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer
}

/* the quotes hint under the pill, at its right edge (RTL start), like the header bar's */
[data-page="me"] .me-search-hint {
    display: block;
    text-align: start;
    margin: 6px 0 14px;
    padding-inline-start: 20px; /* lines up with the text inside the pill */
    color: var(--mut);
    font-size: 13px
}

[data-page="tags"] .alpha {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: 18px
}

[data-page="tags"] .alpha span {
    min-width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--bd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--ink3)
}

[data-page="tags"] .alpha span.on {
    background: var(--acc);
    border-color: var(--acc);
    color: var(--on-acc);
    font-weight: 700
}

[data-page="tags"] .cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 22px;
    margin-bottom: 18px;
    align-items: center
}

[data-page="tags"] .cloud a {
    background: var(--bg);
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 9px 16px;
    color: var(--ink3);
    font-size: 15px
}

[data-page="tags"] .cloud a b {
    color: var(--acc);
    font-weight: 800
}

[data-page="tags"] .cloud a.s1 {
    font-size: 22px;
    font-weight: 800;
    padding: 11px 20px;
    background: var(--acc-t);
    border-color: var(--acc-b);
    color: var(--acc-d)
}

[data-page="tags"] .cloud a.s2 {
    font-size: 18px;
    font-weight: 700
}

/* align-items:start so a card is only as tall as its own content - the pictures are no
   longer a uniform strip, so stretching every card to the tallest in its row would leave
   a gap under the short ones */
[data-page="tags"] .tgrid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 14px;
    align-items: start
}

[data-page="tags"] .tcard {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 14px;
    overflow: hidden
}

[data-page="tags"] .tcard[hidden] {
    display: none
}

/* the tag filter hides cards with [hidden] */
/* the picture keeps its own height instead of being cropped to a 96px band */
[data-page="tags"] .tcard img {
    width: 100%;
    height: auto;
    display: block
}

[data-page="tags"] .tcard .in {
    padding: 13px 15px
}

[data-page="tags"] .tcard .t {
    font-size: 19px;
    font-weight: 800
}

[data-page="tags"] .tcard .t b {
    color: var(--acc)
}

[data-page="tags"] .tcard .c {
    font-size: 13px;
    color: var(--mut);
    margin-top: 3px
}

[data-page="tags"] .tcard .ex {
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.6;
    margin-top: 9px;
    border-top: 1px solid var(--bd2);
    padding-top: 9px
}

[data-page="tags"] .tcard .go {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--acc)
}

@media (max-width: 640px) {
    :is([data-page="tags"], [data-page="articles"], [data-page="me"]) .tsearch {
        font-size: 15px;
        padding: 11px 16px
    }

    [data-page="tags"] .tgrid {
        grid-template-columns:1fr
    }

    [data-page="tags"] .cloud {
        padding: 15px
    }

    [data-page="tags"] .cloud a.s1 {
        font-size: 19px
    }
}

/* ---- page: poem-types ---- */
[data-page="poem-types"] .single {
    padding: 22px 0 34px
}

[data-page="poem-types"] .tcard {
    padding: 0;
    overflow: hidden;
    margin-top: 18px
}

/* the 18px separates one main type card from the next; the first one sits right under the header */
[data-page="poem-types"] .tcard:first-child {
    margin-top: 0
}

[data-page="poem-types"] .tcard .hd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bd)
}

[data-page="poem-types"] .tcard .hd h2 {
    font-size: 23px;
    font-weight: 800
}

[data-page="poem-types"] .tcard .hd .n {
    margin-right: auto;
    font-size: 13px;
    color: var(--mut)
}

[data-page="poem-types"] .tcard .bd {
    padding: 6px 24px 20px
}

[data-page="poem-types"] table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px
}

[data-page="poem-types"] th {
    text-align: right;
    font-size: 12px;
    color: var(--mut);
    font-weight: 700;
    padding: 14px 10px 10px;
    border-bottom: 1px solid var(--bd)
}

[data-page="poem-types"] th.c, [data-page="poem-types"] td.c {
    text-align: center
}

[data-page="poem-types"] td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--bd2);
    color: var(--ink2);
    line-height: 1.6;
    vertical-align: top
}

[data-page="poem-types"] tr:last-child td {
    border: 0
}

[data-page="poem-types"] td.nm {
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap
}

[data-page="poem-types"] td.num {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 600
}

[data-page="poem-types"] td .dash {
    color: var(--mut)
}

[data-page="poem-types"] .note {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    background: var(--acc-t);
    border: 1px solid var(--acc-b);
    border-radius: var(--r);
    padding: 16px 18px;
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink2)
}

[data-page="poem-types"] .note b {
    color: var(--ink)
}

@media (max-width: 640px) {
    [data-page="poem-types"] .tcard .hd {
        padding: 14px 16px
    }

    [data-page="poem-types"] .tcard .hd h2 {
        font-size: 20px
    }

    [data-page="poem-types"] .tcard .bd {
        padding: 2px 12px 14px
    }

    [data-page="poem-types"] table {
        font-size: 14px
    }

    [data-page="poem-types"] th:nth-child(2), [data-page="poem-types"] td:nth-child(2) {
        display: none
    }

    [data-page="poem-types"] th, [data-page="poem-types"] td {
        padding: 11px 6px
    }
}

/* ---- page: plans ---- */
[data-page="plans"] .single {
    padding: 22px 0 34px
}

[data-page="plans"] .toggle {
    display: inline-flex;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 5px;
    margin: 18px auto 0;
    box-shadow: var(--shadow)
}

[data-page="plans"] .toggle span {
    padding: 9px 24px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: var(--mut)
}

[data-page="plans"] .toggle span.on {
    background: var(--acc);
    color: var(--on-acc)
}

[data-page="plans"] .center {
    text-align: center
}

[data-page="plans"] .pgrid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 22px;
    margin-top: 24px;
    align-items: start
}

[data-page="plans"] .pcard {
    padding: 28px 26px 26px;
    text-align: center;
    position: relative
}

[data-page="plans"] .pcard.best {
    border: 2px solid var(--coral);
    box-shadow: var(--shadow-best)
}

[data-page="plans"] .pcard .flag {
    position: absolute;
    top: -13px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    background: var(--coral);
    color: var(--on-acc);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 999px;
    white-space: nowrap
}

[data-page="plans"] .pcard .nm {
    font-size: 22px;
    font-weight: 900
}

[data-page="plans"] .pcard .mark {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--acc-t);
    color: var(--acc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin: 16px auto
}

[data-page="plans"] .pcard .price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px
}

[data-page="plans"] .pcard .amt {
    font-size: 46px;
    font-weight: 900;
    line-height: 1
}

[data-page="plans"] .pcard .cur {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink2)
}

[data-page="plans"] .pcard .per {
    font-size: 14px;
    color: var(--mut)
}

[data-page="plans"] .pcard .desc {
    font-size: 15px;
    color: var(--ink2);
    line-height: 1.65;
    margin: 14px 0 16px;
    min-height: 44px
}

[data-page="plans"] .pcard ul {
    list-style: none;
    text-align: right;
    border-top: 1px solid var(--bd2);
    padding-top: 14px
}

[data-page="plans"] .pcard ul .h {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 7px
}

[data-page="plans"] .pcard li {
    font-size: 15px;
    color: var(--ink2);
    padding: 5px 0;
    display: flex;
    gap: 8px;
    align-items: flex-start
}

[data-page="plans"] .pcard li:before {
    content: "✓";
    color: var(--acc);
    font-weight: 800;
    flex: none
}

[data-page="plans"] .pcard .cta {
    display: block;
    margin-top: 20px;
    text-align: center
}

[data-page="plans"] .cmp {
    padding: 22px 26px;
    margin-top: 26px
}

[data-page="plans"] table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px
}

[data-page="plans"] th {
    font-size: 12px;
    color: var(--mut);
    font-weight: 700;
    padding: 0 10px 12px;
    border-bottom: 1px solid var(--bd);
    text-align: center
}

[data-page="plans"] th.r {
    text-align: right
}

[data-page="plans"] td {
    padding: 13px 10px;
    border-bottom: 1px solid var(--bd2);
    color: var(--ink2);
    text-align: center;
    font-variant-numeric: tabular-nums
}

[data-page="plans"] td.r {
    text-align: right;
    font-weight: 800;
    color: var(--ink)
}

[data-page="plans"] tr:last-child td {
    border: 0
}

[data-page="plans"] .grp {
    font-size: 12px;
    color: var(--mut);
    font-weight: 700
}

[data-page="plans"] .faq {
    margin-top: 26px
}

[data-page="plans"] .faq .q {
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700
}

[data-page="plans"] .faq .q span {
    margin-right: auto;
    color: var(--mut);
    font-weight: 400
}

@media (max-width: 640px) {
    [data-page="plans"] .pgrid {
        grid-template-columns:1fr;
        gap: 26px;
        margin-top: 28px
    }

    [data-page="plans"] .cmp {
        padding: 14px
    }

    [data-page="plans"] table {
        font-size: 13px
    }

    [data-page="plans"] th, [data-page="plans"] td {
        padding: 10px 5px
    }
}

/* ---- page: message ---- */
[data-page="message"] .msgwrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 0 60px;
    text-align: center
}

[data-page="message"] .msgwrap .icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--warn-t);
    border: 1px solid var(--warn-b);
    color: var(--warn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin: 0 auto 20px
}

[data-page="message"] .msgwrap .alert {
    text-align: right;
    justify-content: center;
    font-weight: 600
}

[data-page="message"] .msgwrap .body {
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink2);
    margin-top: 20px
}

[data-page="message"] .msgwrap .acts {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px
}

[data-page="message"] .msgwrap .hint {
    font-size: 14px;
    color: var(--mut);
    margin-top: 26px;
    border-top: 1px solid var(--bd);
    padding-top: 18px
}

[data-page="message"] .msgwrap .hint a {
    color: var(--acc);
    font-weight: 700
}

@media (max-width: 640px) {
    [data-page="message"] .msgwrap {
        padding: 26px 0 40px
    }

    [data-page="message"] .msgwrap .icon {
        width: 62px;
        height: 62px;
        font-size: 28px
    }

    [data-page="message"] .msgwrap .body {
        font-size: 16px
    }

    [data-page="message"] .msgwrap .acts a {
        flex: 1;
        text-align: center
    }
}

/* ============ icons ============
   One SVG sprite (poetry/img/icons.svg, Bootstrap Icons, MIT). Use:
   <svg class="ico"><use href="{% static 'poetry/img/icons.svg' %}#i-heart"></use></svg> */
/* Wrapper that makes a poem's picture a link to the work, alongside its title. It has to
   carry the sizing the img used to get as the flex/grid item - flex:none especially, or
   the thumbs in .mini and .wlist shrink. line-height:0 kills the inline descender gap. */
.piclink {
    display: block;
    flex: none;
    line-height: 0
}

.piclink img {
    display: block
}

.ico {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -.125em;
    flex: none
}

.ico-lg {
    width: 1.35em;
    height: 1.35em
}

.ico-sm {
    width: .85em;
    height: .85em
}

/* ============ long content, clamped ============
   Real works are long; the mockups showed a two-line excerpt. */
.clamp {
    position: relative;
    max-height: 170px;
    overflow: hidden
}

.clamp:after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 64px;
    background: linear-gradient(to top, var(--card), transparent)
}

/* opened in place by the list page's "הצג את ההמשך" */
.clamp.open {
    max-height: none
}

.clamp.open:after {
    display: none
}

/* display:inline-block below would otherwise beat the [hidden] attribute */
.more-link[hidden] {
    display: none
}

.more-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--acc)
}

/* ============ accessibility ============ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100;
    background: var(--acc);
    color: var(--on-acc);
    padding: 10px 18px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-weight: 700
}

.skip:focus {
    inset-inline-start: 0
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--acc);
    outline-offset: 2px;
    border-radius: 4px
}

/* ============ real form controls ============
   The mockups faked inputs with divs; these are the rules for what Django's widgets
   and django-widget-tweaks actually render. */
label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink3);
    margin-bottom: 7px
}

input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=search], input[type=date], input[type=tel], select, textarea {
    width: 100%;
    border: 1px solid var(--bd);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: var(--card);
    transition: border-color .15s, box-shadow .15s
}

input::placeholder, textarea::placeholder {
    color: var(--mut)
}

input:focus, select:focus, textarea:focus {
    border-color: var(--acc);
    box-shadow: 0 0 0 3px var(--acc-t);
    outline: none
}

textarea {
    min-height: 140px;
    line-height: 1.8;
    resize: vertical
}

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--mut) 50%),
    linear-gradient(135deg, var(--mut) 50%, transparent 50%);
    background-position: calc(0% + 18px) calc(50% + 2px), calc(0% + 23px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-left: 38px
}

input[type=checkbox], input[type=radio] {
    width: 18px;
    height: 18px;
    accent-color: var(--acc);
    vertical-align: -3px
}

/* a file field's "מחק" checkbox label (Django's <name>-clear_id): on the checkbox's line, not a bold block like
   the field labels. The [data-page="upload"] .fld label rule is more specific, hence the second selector (plan 081) */
label[for$="-clear_id"], [data-page="upload"] .fld label[for$="-clear_id"] {
    display: inline;
    font-weight: 400;
    color: var(--ink2);
    margin: 0 4px 0 0
}

/* file fields on the edit forms: preview + name (new-tab links) + "מחק", then the file input
   (templates_modern/includes/poetry/modern/file_field.html, plan 082) */
.filefld-current {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px
}

.filefld-thumb img {
    display: block;
    height: 96px;
    max-width: 160px;
    object-fit: cover;
    border: 1px solid var(--bd);
    border-radius: var(--r-sm);
    transition: opacity .15s
}

.filefld-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0
}

.filefld-name {
    font-size: 14px;
    word-break: break-all
}

.filefld-audio {
    max-width: 100%;
    height: 36px
}

.filefld-replace {
    display: block;
    font-size: 13px;
    color: var(--mut);
    margin-bottom: 4px
}

.filefld input[type=file] {
    max-width: 100%;
    font-size: 14px
}

/* "מחק" ticked: show what will be removed on save */
.filefld-current:has(.filefld-clear input:checked) .filefld-thumb img,
.filefld-current:has(.filefld-clear input:checked) .filefld-audio {
    opacity: .35
}

.filefld-current:has(.filefld-clear input:checked) .filefld-name {
    text-decoration: line-through;
    color: var(--mut)
}

input[disabled], select[disabled], textarea[disabled] {
    background: var(--bg);
    color: var(--mut);
    cursor: not-allowed
}

/* Poem add/edit form sections (plan 011): coral line + section title */
.form hr.form-sect {
    border: 0;
    border-top: 2px solid var(--coral);
    margin: 28px 0 22px
}

.form .form-sect-title {
    color: var(--coral);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 14px
}

/* The poem form's font dropdown (Tom Select) marks its wrapper and its options list with the class
   "single" - which is also this theme's page-layout class (.single, padding 22px 0 34px). Without this
   the control sits 22px under its label and 34px above its help text, and the list opens inside padding. */
.ts-wrapper.single, .ts-dropdown.single {
    padding: 0
}

.form-row {
    margin-bottom: 20px
}

.form-row.two {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px
}

.req {
    color: var(--coral)
}

.helptext, .form-text {
    display: block;
    font-size: 12px;
    color: var(--mut);
    margin-top: 6px
}

ul.errorlist {
    list-style: none;
    margin: 7px 0 0;
    padding: 0
}

ul.errorlist li {
    font-size: 13px;
    font-weight: 600;
    color: var(--coral-d);
    background: var(--coral-t);
    border: 1px solid var(--coral-b);
    border-radius: 9px;
    padding: 8px 12px;
    margin-top: 6px
}

.is-invalid, input.is-invalid, textarea.is-invalid, select.is-invalid {
    border-color: var(--coral)
}

button, .btn {
    font-family: inherit;
    cursor: pointer;
    border: 0
}

button.btn.ghost {
    border: 1px solid var(--acc-b)
}

/* ============ rich text (TinyMCE output) ============
   Admin-authored HTML: article bodies, Block content, page_sub_title, editor notes.
   Scoped so old inline styles cannot leak into the rest of the page. */
.rich-text {
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink2)
}

.rich-text > *:first-child {
    margin-top: 0
}

.rich-text p {
    margin: 0 0 14px
}

.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.3;
    margin: 26px 0 10px
}

.rich-text h1 {
    font-size: 30px
}

.rich-text h2 {
    font-size: 26px
}

.rich-text h3 {
    font-size: 22px
}

.rich-text h4 {
    font-size: 19px
}

.rich-text ul, .rich-text ol {
    margin: 0 20px 16px 0;
    padding: 0
}

.rich-text li {
    margin-bottom: 6px
}

.rich-text a {
    color: var(--acc);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

.rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 18px 0
}

.rich-text blockquote {
    font-family: "Frank Ruhl Libre", Georgia, serif;
    font-size: 22px;
    line-height: 1.6;
    color: var(--ink);
    border-right: 4px solid var(--coral);
    padding: 6px 20px 6px 0;
    margin: 22px 0
}

.rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    font-size: 15px
}

.rich-text th, .rich-text td {
    border: 1px solid var(--bd);
    padding: 10px 12px;
    text-align: right
}

.rich-text hr {
    border: 0;
    border-top: 1px solid var(--bd);
    margin: 24px 0
}

.rich-text iframe {
    max-width: 100%;
    border-radius: 14px
}

/* poem contents stay in Heebo, including any blockquote a poem carries */
.poem blockquote, .list-poem-contents blockquote {
    font-family: Heebo, Arial, sans-serif
}

/* Poem content font for the poem details page and the homepage daily poem (the poem list keeps Heebo).
   The font comes from the poem's Font, else the default Font (admin > גופנים): the template sets
   --poem-font (family stack) and --poem-size on the .poem element ({% poem_font_vars %}).
   --poem-size is --poem-size-default - the global default from settings.DEFAULT_POEM_FONT_SIZE / _MOBILE,
   set in the head by {% poem_default_size_style %} and switching by itself at the mobile width - plus or
   minus the poem's own distance from it. The font-size of those two rules (further up) keeps it inside
   8-72px. Without the properties the theme's own values apply. */
[data-page="poem"] .poem, [data-page="home"] .hero .poem {
    font-family: var(--poem-font, Alef, Heebo, Arial, sans-serif)
}

/* Quotes inside a poem use the poem's font and keep the 22 : 17 ratio to the poem text at any size */
[data-page="poem"] .poem blockquote, [data-page="home"] .hero .poem blockquote {
    font-family: inherit;
    font-size: calc(22em / 17)
}

/* Poem title font for the same 2 places - Alef bold (Alef has only 400 and 700) */
[data-page="poem"] .work h1, [data-page="home"] .hero h1 {
    font-family: Alef, Heebo, Arial, sans-serif;
    font-weight: 700
}

/* ============ structural rules Bootstrap's JS expects ============
   bootstrap.bundle.min.js only toggles classes; without bootstrap.min.css these
   four behaviours need their own appearance. */
.collapse:not(.show) {
    display: none
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .25s ease
}

.dropdown {
    position: relative
}

.dropdown-menu {
    position: absolute;
    z-index: 40;
    display: none;
    min-width: 200px;
    padding: 7px;
    margin: 6px 0 0;
    list-style: none; /* the nav's menus are <ul>s - without this the browser's bullets show outside the popup */
    inset-inline-end: 0;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow);
    text-align: right
}

.dropdown-menu.show {
    display: block
}

.dropdown-item {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 15px;
    color: var(--ink2)
}

.dropdown-item:hover, .dropdown-item:focus {
    background: var(--acc-t);
    color: var(--acc)
}

.dropdown-divider {
    height: 1px;
    background: var(--bd2);
    /*margin: 6px 0;*/
    width: 75%;
    margin: 4px auto;
    opacity: 0.5;
}

.tab-pane {
    display: none
}

.tab-pane.active, .tab-pane.show {
    display: block
}

.tooltip {
    position: absolute;
    z-index: 60;
    font-size: 13px;
    opacity: 0;
    transition: opacity .15s
}

.tooltip.show {
    opacity: 1
}

.tooltip .tooltip-inner {
    background: var(--ink);
    color: var(--card);
    padding: 6px 11px;
    border-radius: 8px;
    max-width: 240px
}

.tooltip .tooltip-arrow {
    display: none
}

/* ============ the mobile menu ============
   Our own drawer; the classic theme's canvas menu belongs to the Katen CSS, which
   this theme does not load. Bootstrap's collapse JS drives it. */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none
}

.drawer.show {
    display: block
}

.drawer .veil {
    position: absolute;
    inset: 0;
    background: var(--overlay)
}

.drawer .panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(84vw, 340px);
    background: var(--card);
    padding: 20px 18px;
    overflow: auto;
    box-shadow: var(--shadow-drawer)
}

.drawer .panel .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px
}

.drawer nav a {
    display: block;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink2)
}

.drawer nav a.on {
    background: var(--acc-t);
    color: var(--acc)
}

/* the items that on desktop sit inside the "יצירות" / "מידע" dropdowns: indented under their
   group head, a step smaller and lighter (plan 061) */
.drawer nav a.sub {
    padding-block: 9px;
    padding-inline-start: 30px;
    font-size: 15px;
    font-weight: 500
}

.drawer .sep {
    height: 1px;
    background: var(--bd2);
    margin: 12px 0
}

/* a divider inside a group - where the desktop dropdown draws one */
.drawer .sep.sub {
    margin: 6px 0;
    margin-inline-start: 30px
}

/* ============ search overlay ============ */
.searchbox {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: none;
    background: var(--overlay-strong);
    padding-top: 14vh
}

.searchbox.show {
    display: block
}

.searchbox .in {
    max-width: 640px;
    margin: 0 auto;
    background: var(--card);
    border-radius: var(--r);
    padding: 22px;
    box-shadow: var(--shadow)
}

.searchbox input {
    font-size: 19px;
    padding: 14px 16px
}

.searchbox .hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--mut)
}

/* ============ utilities ============ */
.center {
    text-align: center
}

.stack > * + * {
    margin-top: 14px
}

.muted {
    color: var(--mut)
}

.nowrap {
    white-space: nowrap
}

.hidden {
    display: none !important
}

/* ============ print ============ */
@media print {
    .nav, .rail, .tabbar, .drawer, .searchbox, footer, .bigacts, .acts, .pager, .crumbs {
        display: none !important
    }

    body {
        background: #fff
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd
    }

    .wrap, .layout {
        display: block;
        max-width: none;
        padding: 0
    }

    a[href]:after {
        content: ""
    }
}

/* ---- page: page (content block) - real pages have no TOC rail, so one column ---- */
[data-page="page"] .single {
    display: block
}

[data-page="page"] .doc {
    max-width: 880px;
    margin: 0 auto
}

[data-page="page"] .docpic {
    max-width: 320px;
    border-radius: 14px;
    margin: 0 0 20px
}

[data-page="page"] .doc .rich-text {
    margin-top: 18px
}

/* ---- empty page-header wrappers collapse (the base always emits one) ---- */
.pagehead:not(:has(*)) {
    display: none;
    padding: 0
}

/* ---- the work's own text alignment (Poem.text_alignment: R / L / C) ---- */
.align-r {
    text-align: right
}

.align-l {
    text-align: left;
    direction: ltr
}

.align-c {
    text-align: center
}

/* ---- page: home (direction B homepage mockup) ---- */
body[data-page="home"] {
    background: var(--bg);
    color: var(--ink)
}

[data-page="home"] .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px
}

[data-page="home"] .nav {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bd);
    height: 70px;
    display: flex;
    align-items: center
}

[data-page="home"] .nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%
}

[data-page="home"] .nav img.logo {
    height: 36px
}

[data-page="home"] .nav nav {
    display: flex;
    gap: 4px;
    align-items: center
}

[data-page="home"] .nav nav a {
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink2)
}

[data-page="home"] .nav nav a.on {
    background: var(--acc-t);
    color: var(--acc)
}

[data-page="home"] .nav .r {
    display: flex;
    gap: 9px;
    align-items: center
}

[data-page="home"] .ib {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--bd);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mut);
    font-size: 18px;
    flex: none
}

[data-page="home"] .pill {
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--coral);
    color: var(--on-acc);
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap
}

[data-page="home"] .pill.ghost {
    background: var(--card);
    color: var(--acc);
    border: 1px solid var(--acc-b)
}

[data-page="home"] main {
    padding: 26px 0 36px
}

[data-page="home"] .h2 {
    font-size: 24px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
}

[data-page="home"] .h2:after {
    content: "";
    width: 42px;
    height: 4px;
    background: var(--coral);
    border-radius: 2px;
    flex: none;
    margin-right: auto
}

/* the line always ends up at the far (left, RTL) end: with no <small> its own auto margin
   takes the free space; with one, the <small> grows to fill the header and keeps its text
   against the line, which leaves that auto margin nothing to take. */
[data-page="home"] .h2 small {
    font-size: 13px;
    color: var(--mut);
    font-weight: 400;
    flex: 1 1 auto;
    text-align: left
}

/* .h2.band: a card title as a filled band, in the news card's header colours (.news-head).
   The negative margins cancel the card's padding so the band reaches the card's edges; the
   top corners repeat the card's radius because the card does not clip its children. */
[data-page="home"] .card > .h2.band {
    margin: -26px -26px 20px;
    padding: 14px 26px;
    background: var(--acc-t);
    border-bottom: 1px solid var(--acc-b);
    border-radius: 16px 16px 0 0;
    color: var(--acc-d)
}

[data-page="home"] .card {
    background: var(--card);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 26px
}

[data-page="home"] .hero {
    display: grid;
    grid-template-columns:7fr 5fr;
    gap: 22px
}

[data-page="home"] .badge {
    display: inline-block;
    background: var(--acc-t);
    color: var(--acc);
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px
}

[data-page="home"] .hero h1 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
    margin: 12px 0 4px
}

[data-page="home"] .hero .by {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--mut);
    font-size: 16px;
    margin-bottom: 16px
}

[data-page="home"] .hero .by img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover
}

[data-page="home"] .hero .row {
    display: grid;
    grid-template-columns:1fr 190px;
    gap: 22px;
    align-items: start
}

[data-page="home"] .hero .poem {
    font-size: clamp(8px, var(--poem-size, 17px), 72px);
    line-height: 1.65;
    color: var(--ink2);
    -webkit-mask-image: linear-gradient(#000 72%, transparent)
}

[data-page="home"] .hero .row img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: 14px
}

[data-page="home"] .cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 24px;
    border-radius: 12px;
    background: var(--coral);
    color: var(--on-acc);
    font-weight: 700;
    font-size: 15px
}

[data-page="home"] .tips {
    position: relative;
    overflow: hidden;
    color: var(--on-dark);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px
}

[data-page="home"] .tips img.bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

[data-page="home"] .tips .veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tips-veil-from) 18%, var(--tips-veil-to))
}

[data-page="home"] .tips .in {
    position: relative;
    padding: 26px
}

[data-page="home"] .tips h3 {
    font-size: 29px;
    font-weight: 900;
    line-height: 1.2;
    margin: 14px 0 8px
}

[data-page="home"] .tips p {
    font-size: 16px;
    color: var(--on-dark-mut);
    line-height: 1.6
}

[data-page="home"] .tips .badge {
    background: var(--glass);
    color: var(--on-dark)
}

[data-page="home"] .mark {
    display: inline-block;
    background: var(--mark-bg);
    color: var(--mark-ink);
    padding: 4px 12px;
    border-radius: 6px;
    font-weight: 700;
    margin-top: 14px;
    font-size: 16px
}

[data-page="home"] .g2 {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 22px;
    margin-top: 22px
}

[data-page="home"] .li {
    display: flex;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 1px solid var(--bd-soft);
    align-items: center
}

[data-page="home"] .li:last-child {
    border: 0
}

[data-page="home"] .li img.th {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    flex: none
}

[data-page="home"] .li .meta {
    min-width: 0
}

[data-page="home"] .li .t {
    font-size: 17px;
    font-weight: 700
}

[data-page="home"] .li .s {
    font-size: 13px;
    color: var(--mut);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px
}

[data-page="home"] .li .s img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover
}

[data-page="home"] .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
}

[data-page="home"] .chip {
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--acc-t);
    color: var(--acc);
    font-weight: 500;
    font-size: 15px
}

/* the work count in a random-tag chip: the chip's own text colour, faded, so it reads on any tag colour */
[data-page="home"] .chip .n {
    color: inherit;
    opacity: .7
}

[data-page="home"] .cm {
    display: flex;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--coral)
}

[data-page="home"] .cm:last-child {
    border: 0
}

[data-page="home"] .cm img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: none
}

[data-page="home"] .cm .s {
    font-size: 13px;
    color: var(--mut)
}

[data-page="home"] .cm .t {
    font-size: 15px;
    line-height: 1.5
}

[data-page="home"] .about {
    display: grid;
    grid-template-columns:1fr 320px;
    gap: 30px;
    align-items: center;
    margin-top: 22px
}

[data-page="home"] .about p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--ink2)
}

[data-page="home"] .about img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 14px
}

[data-page="home"] .stats {
    display: flex;
    gap: 26px;
    margin-top: 18px
}

[data-page="home"] .stats div {
    font-size: 13px;
    color: var(--mut)
}

[data-page="home"] .stats b {
    display: block;
    font-size: 25px;
    color: var(--ink)
}

[data-page="home"] .news {
    display: flex;
    gap: 11px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 11px 16px;
    font-size: 15px;
    margin-bottom: 22px
}

[data-page="home"] .news b {
    background: var(--coral);
    color: var(--on-acc);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    flex: none
}

/* newsletter banner: the rail's .news-box, scaled up to the homepage's full width */
[data-page="home"] .nl-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: var(--card);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    padding: 34px 40px;
    margin-top: 22px
}

[data-page="home"] .nl-banner h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--ink)
}

[data-page="home"] .nl-banner p {
    font-size: 17px;
    color: var(--ink2);
    line-height: 1.6
}

[data-page="home"] .nl-banner .btn {
    flex: none;
    min-width: 260px;
    text-align: center;
    padding: 16px 36px;
    font-size: 18px;
    border-radius: 999px
}

@media (max-width: 640px) {
    [data-page="home"] .nl-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 24px 20px
    }

    [data-page="home"] .nl-banner h2 {
        font-size: 23px
    }

    [data-page="home"] .nl-banner .btn {
        min-width: 0
    }
}

[data-page="home"] footer {
    background: var(--card);
    border-top: 1px solid var(--bd);
    padding: 26px 0;
    font-size: 14px;
    color: var(--mut)
}

[data-page="home"] footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap
}

[data-page="home"] footer a {
    margin-left: 18px
}

@media (max-width: 640px) {
    [data-page="home"] .wrap {
        padding: 0 16px
    }

    [data-page="home"] .nav {
        height: 58px
    }

    [data-page="home"] .nav img.logo {
        height: 28px
    }

    [data-page="home"] .hero, [data-page="home"] .g2, [data-page="home"] .about, [data-page="home"] .hero .row {
        grid-template-columns:1fr
    }

    [data-page="home"] .hero h1 {
        font-size: 32px
    }

    [data-page="home"] .hero .row img {
        height: 170px
    }

    [data-page="home"] .card {
        padding: 18px;
        border-radius: 14px
    }

    [data-page="home"] .tips {
        min-height: 280px
    }

    [data-page="home"] .tips h3 {
        font-size: 24px
    }

    [data-page="home"] .h2 {
        font-size: 20px
    }

    [data-page="home"] .card > .h2.band {
        margin: -18px -18px 16px;
        padding: 12px 18px;
        border-radius: 14px 14px 0 0
    }

    [data-page="home"] main {
        padding: 16px 0 26px
    }

    [data-page="home"] .about img {
        height: 190px
    }

    [data-page="home"] .stats {
        gap: 16px
    }

    [data-page="home"] .stats b {
        font-size: 21px
    }

    [data-page="home"] .news {
        font-size: 13px
    }
}

/* home: the homepage_news Block, as a card with its own header band - the classic
   homepage gives it a filled title bar above the content (.home-daily-poem-header).
   CSS_B styled .news as a one-line strip with a coral <b> badge; that badge was the
   mockup's invention, and it also turned any <b> inside the Block's rich text into a
   red pill, so both are overridden here. */
[data-page="home"] .news {
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bd);
    box-shadow: var(--shadow);
    margin-bottom: 22px
}

[data-page="home"] .news .news-head {
    background: var(--acc-t);
    border-bottom: 1px solid var(--acc-b);
    padding: 14px 22px
}

[data-page="home"] .news .news-head h2 {
    font-size: 22px;
    font-weight: 800;
    color: var(--acc-d);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 12px
}

[data-page="home"] .news .news-head h2:before {
    content: "";
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: var(--coral);
    flex: none
}

[data-page="home"] .news .news-body {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    padding: 20px 22px
}

[data-page="home"] .news .news-text {
    flex: 1 1 auto;
    min-width: 0
}

[data-page="home"] .news .rich-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    line-height: 1.8
}

/* TinyMCE nests font-size spans (18pt text inside a 24pt wrapper). The wrapper has no text
    of its own but still multiplies the 1.8 by its size and sets the line's height, so the
   wrapped lines stand far apart. Nested sizes get line-height 1.1, so the line is about as tight
   as the paragraph's own 1.8 allows (37.8px for that 18pt-in-24pt text).
   Two rules, so a browser without :has() drops only the first. */
[data-page="home"] .news .rich-text span[style*="font-size"]:has(span[style*="font-size"]) {
    line-height: 1.1
}

[data-page="home"] .news .rich-text span[style*="font-size"] span[style*="font-size"] {
    line-height: 1.1
}

[data-page="home"] .news .rich-text > *:last-child {
    margin-bottom: 0
}

[data-page="home"] .news .rich-text b, [data-page="home"] .news .rich-text strong {
    background: none;
    color: var(--ink);
    padding: 0;
    border-radius: 0;
    font-weight: 800;
    font-size: inherit
}

[data-page="home"] .news .newspic {
    flex: none;
    max-width: 300px;
    max-height: 320px;
    border-radius: 12px;
    object-fit: cover
}

@media (max-width: 640px) {
    [data-page="home"] .news .news-head {
        padding: 12px 16px
    }

    [data-page="home"] .news .news-head h2 {
        font-size: 19px
    }

    [data-page="home"] .news .news-body {
        flex-direction: column;
        gap: 14px;
        padding: 16px
    }

    [data-page="home"] .news .newspic {
        max-width: 100%;
        align-self: center
    }
}

/* How much of the daily poem the homepage shows. There is no line-clamp and the view
   sends the whole poem, so this cap is the only thing that ends it; the fade above
   (-webkit-mask-image, 72%) is a percentage of the element, so it follows this height.
   1.8em == one line at this font-size, so the multiplier IS the line count.
   A stray '}' used to sit above this rule: the CSS parser folds a top-level '}' into the
   next selector rather than discarding it, so the prelude became '} [data-page=...]',
   which is invalid - the rule was dropped and the poem ran to full length. */
[data-page="home"] .hero .poem {
    max-height: calc(9 * 1.65em);
    overflow: hidden
}

/* ---- page: upload - the real form's controls (the mockup faked them) ---- */
[data-page="upload"] .radios .radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 14px;
    color: var(--ink3);
    font-weight: 500;
    margin: 0
}

[data-page="upload"] .radios input {
    margin: 0
}

[data-page="upload"] .radios input:checked + * {
    color: var(--acc)
}

[data-page="upload"] .tagfield {
    max-height: none
}

[data-page="upload"] .tagfield .tag-check {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0
}

[data-page="upload"] .tagfield label.t {
    cursor: pointer;
    margin: 0;
    font-weight: 600;
    background: var(--bg);
    color: var(--ink3);
    border: 1px solid var(--bd)
}

[data-page="upload"] .tagfield .tag-check:checked + label.t {
    background: var(--acc-t);
    color: var(--acc);
    border-color: var(--acc-b)
}

/* editor-only tags (the "*" chips) are red in both themes (plan 114): the classic theme's tag-btn--danger,
   here the coral tokens with the same tint-fill pattern a regular marked chip uses with the blue ones */
[data-page="upload"] .tagfield label.t.editor-only {
    border-style: dashed;
    color: var(--coral-d);
    border-color: var(--coral)
}

[data-page="upload"] .tagfield .tag-check:checked + label.t.editor-only {
    background: var(--coral-t);
    color: var(--coral-d);
    border-color: var(--coral)
}

[data-page="upload"] .stars input {
    width: auto
}

[data-page="upload"] .fld textarea {
    min-height: 220px;
    font-family: Heebo, Arial, sans-serif;
    font-size: 18px
}

/* the abstract is a short text: its own height (about 3 rows) instead of the 220px of the poem's content.
   A textarea's rows attribute only shows once it asks for more than the min-height */
[data-page="upload"] .fld textarea#id_abstract {
    min-height: 110px
}

/* ============ auth and other short forms ============
   login / signup / password reset / contact / newsletter - one narrow card. */
.authwrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 22px 0 40px
}

.authwrap.wide {
    max-width: 760px
}

.authcard {
    padding: 30px 32px
}

.authcard h2 {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 8px
}

.authcard .lead {
    font-size: 16px;
    line-height: 1.75;
    color: var(--ink2);
    margin-bottom: 20px
}

.authcard .fld {
    margin-bottom: 18px
}

.authcard .actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 22px
}

/* .actions is a flex row, so .center's text-align alone does not move its buttons */
.authcard .actions.center {
    justify-content: center
}

.authcard .foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--bd2);
    font-size: 15px;
    color: var(--ink2);
    line-height: 2
}

.authcard .foot a {
    color: var(--acc);
    font-weight: 700
}

.authcard input[name="username"], .authcard input[name="password"],
.authcard input[type="email"], .authcard input[type="password"] {
    direction: ltr;
    text-align: left
}

@media (max-width: 640px) {
    .authcard {
        padding: 20px 18px
    }

    .authcard h2 {
        font-size: 22px
    }

    .authcard .actions .btn {
        flex: 1;
        text-align: center
    }
}

/* the star rating widget (profile settings, poem form): 'far' empty, 'fas' filled */
.stars {
    font-size: 26px;
    letter-spacing: 4px;
    color: var(--track)
}

.stars .fas {
    color: var(--star)
}

.stars i {
    font-style: normal
}

/* ============ the shared includes ============
   favorite_button_*.html, share_menu.html and the badge includes are rendered by
   views (HTMX swaps the favourite button's markup back in after every click), so
   this theme keeps their markup and styles the few classes they rely on instead
   of shadowing the files. Their icon fonts are not loaded here. */
.badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
    background: var(--acc-t);
    color: var(--acc)
}

/* tag_badge.html sets background-color inline from Tag.color; tags without a
   colour fall back to the chip look above rather than to an unstyled span */
.badge.rounded {
    border-radius: 999px
}

.fa, .fa-regular, .fa-solid, .bi {
    font-style: normal;
    font-weight: 400
}

.fa-heart:before {
    content: "\2665"
}

/* filled heart  */
.fa-regular.fa-heart:before {
    content: "\2661"
}

/* outline heart */
/* follow / unfollow: a person with a plus / minus, like the classic fa-user-plus / fa-user-minus.
   Drawn with Bootstrap Icons' person-plus-fill / person-dash-fill (MIT) as a mask, so the glyph
   takes the button's colour and the shared include (also re-rendered by HTMX) stays unchanged. */
.fa-user-plus:before, .fa-user-minus:before {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: -.15em;
    background-color: currentColor;
    -webkit-mask: var(--person-icon) no-repeat center / contain;
    mask: var(--person-icon) no-repeat center / contain
}

.fa-user-plus:before {
    --person-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3E%3Cpath fill-rule='evenodd' d='M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E")
}

.fa-user-minus:before {
    --person-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11 7.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5'/%3E%3Cpath d='M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/%3E%3C/svg%3E")
}

.fa-share-alt:before {
    content: "\2197"
}

.fa-volume-high:before, .fa-volume-xmark:before {
    content: "\266A"
}

.fa-bell:before {
    content: "\1F514"
}

.fa-star:before {
    content: "\2605"
}

.fa-star.far:before {
    content: "\2606"
}

button.btn.p-0 {
    background: none;
    color: var(--coral);
    padding: 6px 10px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

button.btn.p-0:hover {
    border-color: var(--coral)
}

/* the poem page's edit link (shown only to who may edit the poem) - same coral pill as its neighbours */
/* Coral capsule with white label + pencil icon (.ico inherits currentColor); the border is the
   page's light grey-blue (--bd, the same tone as the --bg page background). */
.edit-poem {
    color: var(--on-acc);
    background: var(--coral);
    padding: 6px 14px;
    border: 1px solid var(--bd);
    border-radius: 999px;
    font-size: 16px;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* about one space between "עריכת היצירה" and the icon */
    text-decoration: none
}

.edit-poem:hover {
    color: var(--on-acc);
    background: var(--coral-d)
}

/* The share button sits in the same row as those like/follow pills but is an .ib, which is
   a grey 38px rounded square. Give it their pill outline and coral colour; .ico inherits
   currentColor, so the glyph turns coral with the text. Scoped to .share so the navbar
   burger, the drawer close and the bell keep the plain .ib chrome. */
.share > .ib {
    width: auto;
    height: auto;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--coral);
    font-size: 16px;
    line-height: 1.35
}

.share > .ib:hover {
    border-color: var(--coral)
}

/* The poem page's title row: the h1, and the labelled share pill pushed to the row's left end.
   The pill never shrinks, so a long title wraps beside it instead. */
[data-page="poem"] .work .title-row {
    display: flex;
    align-items: center;
    gap: 12px
}

[data-page="poem"] .work .title-row h1 {
    flex: 1 1 auto;
    min-width: 0
}

[data-page="poem"] .work .title-row .share {
    flex: none;
    margin-inline-start: auto
}

/* The labelled share button ("שיתוף" + icon) - the same coral capsule as .edit-poem */
.share.labeled > .ib {
    color: var(--on-acc);
    background: var(--coral);
    padding: 6px 14px;
    border: 1px solid var(--bd);
    gap: 10px
}

.share.labeled > .ib:hover {
    color: var(--on-acc);
    background: var(--coral-d);
    border-color: var(--bd)
}

.dropup {
    position: relative;
    display: inline-flex
}

.dropup > [data-toggle], .dropup > [data-bs-toggle] {
    cursor: pointer;
    border: 1px solid var(--bd);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--coral);
    display: inline-flex;
    align-items: center
}

.dropup .dropdown-menu {
    bottom: 100%;
    top: auto;
    margin-bottom: 6px
}

.dropdown-item .bi {
    display: none
}

/* brand glyphs: the label says it */

/* ============ notifications ============
   The bell in the header opens a dropdown whose body HTMX loads; the list page
   uses the .nrow rows the "האיזור שלי" page already defines. */
.nav .notif {
    position: relative
}

.nav .bell {
    position: relative
}

.nav .bell .count {
    position: absolute;
    top: -5px;
    inset-inline-start: -5px;
    background: var(--coral);
    color: var(--on-acc);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    min-width: 17px;
    text-align: center
}

.notif-menu {
    width: min(420px, 92vw);
    padding: 0;
    max-height: min(70vh, 560px);
    overflow: auto;
    text-align: right
}

.notif-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--bd)
}

.notif-head strong {
    font-size: 15px
}

.notif-body {
    padding: 8px
}

.notif-item {
    border: 1px solid var(--bd);
    border-radius: 12px;
    margin-bottom: 8px;
    background: var(--card)
}

.notif-item.unread {
    border-inline-start: 3px solid var(--coral)
}

.notif-item summary {
    list-style: none;
    cursor: pointer;
    padding: 11px 13px;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.notif-item summary::-webkit-details-marker {
    display: none
}

.notif-item summary .subject {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--ink)
}

.notif-item summary .when {
    font-size: 12px;
    color: var(--mut)
}

.notif-item[open] summary {
    border-bottom: 1px solid var(--bd2)
}

.notif-item .detail {
    padding: 11px 13px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink2)
}

/* shared by the dropdown, the notifications page and "האיזור שלי" */
.notif-links span {
    font-size: 14px
}

/* only the poem title / the author name is a link */
.notif-links a {
    color: var(--acc);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

/* the dropdown: one link per line */
.notif-item .notif-links span {
    display: block;
    margin-bottom: 4px
}

/* the pages: side by side */
.nrow .notif-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin-top: 6px
}

.notif-item .detail form {
    margin-top: 10px
}

.notif-empty {
    padding: 22px 16px;
    text-align: center;
    color: var(--mut);
    font-size: 14px
}

.notif-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-top: 1px solid var(--bd);
    font-size: 14px
}

.notif-foot a {
    color: var(--acc);
    font-weight: 700
}

/* a multi-line notification: the checkbox sits on the subject's first line, not the block's middle */
[data-page="me"] .nrow:has(> input[type="checkbox"]) {
    align-items: flex-start
}

[data-page="me"] .nrow > input[type="checkbox"] {
    flex: none;
    width: 13px;
    height: 13px;
    /* half of (first-line height - box height); first line = .t's 15px * 1.45 */
    margin-top: calc((15px * 1.45 - 13px) / 2)
}

[data-page="me"] .nrow label.t {
    /* its own line box, so line-height 1.45 alone sets the first line's height */
    display: block;
    font-weight: 700;
    cursor: pointer;
    margin: 0
}

/* the mark-as-read button and the "select all on this page" box on one line (plan 133) */
[data-page="me"] .formacts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px
}

[data-page="me"] .notif-select-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer
}

/* another user's list (/notifications/<username>/) is read-only - the subject is not a label */
[data-page="me"] .nrow div.t {
    font-weight: 700
}

/* On phones the bell sits near the left edge, so a menu anchored to it ran off the
   right edge of the screen (plan 073). A fixed panel under the header instead: fixed
   resolves against .nav (its backdrop-filter makes it a containing block), which is
   sticky at the top and full width, so the panel lands in the same place either way.
   The max-height leaves the bottom tab bar visible; the panel scrolls on its own. */
@media (max-width: 640px) {
    .notif-menu {
        position: fixed;
        top: 64px;
        inset-inline: 8px;
        width: auto;
        margin: 0;
        max-height: calc(100vh - 64px - 80px)
    }
}

/* ============ the search bar ============
   Under the navbar, as in the classic header: free text + poem type + submit.
   Replaces the overlay the first draft of this theme used - that one sent the
   wrong field name, so every search returned every work. */
.searchbar {
    background: var(--card);
    border-bottom: 1px solid var(--bd);
    position: sticky;
    top: 70px;
    z-index: 25
}

/* the vertical padding is the breathing room between the controls and the two rules that
   bracket this bar - the navbar's bottom edge above and .searchbar's border-bottom below.
   "form.wrap", not "form": it must outrank [data-page="home"] .wrap, which zeroes it */
.searchbar form.wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 24px;
    flex-wrap: nowrap
}

.searchbar input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 520px;
    padding: 10px 14px
}

.searchbar select {
    flex: 0 0 auto;
    width: auto;
    min-width: 180px;
    padding: 10px 14px 10px 38px
}

.searchbar .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 7px
}

/* "חיפוש בגוף היצירה" / "חיפוש יוצרים" - between the type dropdown and the submit button,
   which is the bar's last control. */
.searchbar .opts {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 14px
}

.searchbar .opts label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mut);
    white-space: nowrap;
    cursor: pointer
}

.searchbar .opts input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--acc);
    margin: 0;
    cursor: pointer
}

/* "מירכאות לחיפוש ביטוי מדויק" - its own line under the form's controls. The row is a .wrap of
   its own, so it shares the form's centered bounds and side padding and the hint starts exactly
   under the search box (the form's first item) rather than at the page edge (plans 028, 030);
   the negative margin eats most of the form's 20px bottom padding, leaving a 6px gap (plan 069) */
.searchbar .hint-row {
    margin-top: -14px;
    padding-bottom: 10px
}

.searchbar .hint {
    display: block;
    font-size: 12px;
    color: var(--mut)
}

/* the two checkboxes are the widest thing on the bar after the search box: below this the
   controls no longer fit on one line, so the search box takes the first line on its own and
   the dropdown, the checkboxes and the button share the second */
@media (max-width: 1024px) {
    .searchbar form.wrap {
        flex-wrap: wrap
    }

    .searchbar input[type=search] {
        flex: 1 1 100%;
        max-width: none
    }
}

@media (max-width: 640px) {
    .searchbar {
        position: static
    }

    .searchbar form.wrap {
        padding: 14px 16px;
        gap: 8px;
        flex-wrap: wrap
    }

    .searchbar input[type=search] {
        min-width: 0;
        flex: 1 1 100%;
        max-width: none
    }

    .searchbar select {
        flex: 1;
        min-width: 0
    }

    /* three rows rather than four: the checkboxes are the one control wide enough to need a
       line of its own, so it is sent past the button instead of splitting the row above it.
       Visual order only - the tab order still follows the markup. */
    .searchbar input[type=search] {
        order: 1
    }

    .searchbar select {
        order: 2
    }

    .searchbar .btn {
        order: 3
    }

    .searchbar .opts {
        order: 4;
        flex: 1 1 100%;
        gap: 8px 16px;
        flex-wrap: wrap
    }

    /* three nowrap labels no longer fit a phone's width: the third, "הכללת יצירות נחלת הכלל"
       (plan 051), takes the whole row so it always starts a line of its own under the other
       two (plan 060) */
    .searchbar .opts label[for="search_public_domain"] {
        flex: 1 1 100%
    }
}

/* ============ responsive guards, last word ============
   Page blocks below the shared section re-declare some shared classes (the home
   block sets .ib, for one), and at equal specificity the later rule wins - which
   is how the mobile burger reappeared on desktop. These come last on purpose. */
.ib.only-mobile {
    display: none
}

.no-mobile {
    display: revert
}

@media (max-width: 640px) {
    .ib.only-mobile {
        display: flex
    }

    .no-mobile {
        display: none !important
    }
}

/* ============ the header on phones (plan 073) ============
   Burger + logo + bell + pill were wider than a 360px screen and nothing could shrink,
   so the bell was drawn over the pill. Tighter gutter and gaps, a smaller pill, and the
   logo is the one thing that gives: its link may shrink and the image scales with it.
   The logo also hugs the burger (margin-inline-end: auto) instead of floating to the
   middle of whatever free space space-between finds. The home page re-declares these
   classes at higher specificity, hence the paired selectors. */
@media (max-width: 640px) {
    .nav .wrap, [data-page="home"] .nav .wrap {
        padding: 0 12px;
        gap: 10px
    }

    .nav .brand {
        display: flex;
        align-items: center;
        flex: 0 1 auto;
        min-width: 0;
        margin-inline-end: auto
    }

    .nav img.logo, [data-page="home"] .nav img.logo {
        height: auto;
        max-height: 28px;
        max-width: 100%
    }

    .nav .r, [data-page="home"] .nav .r {
        gap: 6px;
        flex: none
    }

    .nav .notif {
        flex: none
    }

    .nav .pill, [data-page="home"] .nav .pill {
        padding: 8px 13px;
        font-size: 13px
    }
}

/* ============ the search bar's type picker on phones (plan 074) ============
   Android draws a native <select> as a list of radio rows, so the spacer options showed as
   empty rows with the OS's own dividers. _search.html builds .typepick from the select's
   options; on phones it stands in for the select (which stays in the form and is what is
   submitted) and its menu borrows the drawer's look: group heads with their types indented. */
.typepick {
    display: none
}

@media (max-width: 640px) {
    .searchbar form.has-picker select {
        display: none
    }

    .searchbar form.has-picker .typepick {
        display: block;
        flex: 1;
        min-width: 0;
        order: 2
    }

    .typepick > button {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border: 1px solid var(--bd);
        border-radius: var(--r-sm);
        padding: 10px 14px;
        font-size: 15px;
        font-family: inherit;
        color: var(--ink);
        background: var(--card);
        text-align: start
    }

    .typepick > button:focus-visible {
        border-color: var(--acc);
        box-shadow: 0 0 0 3px var(--acc-t);
        outline: none
    }

    .typepick > button .ico {
        flex: none;
        color: var(--mut)
    }

    .typepick .dropdown-menu {
        inset-inline: 0;
        min-width: 0;
        max-height: 70vh;
        overflow: auto
    }

    .typepick .dropdown-item {
        width: 100%;
        border: 0;
        background: none;
        font-family: inherit;
        text-align: start;
        padding: 12px 10px;
        border-radius: 10px;
        font-size: 17px;
        font-weight: 600;
        color: var(--ink2)
    }

    .typepick .dropdown-item.sub {
        padding-block: 9px;
        padding-inline-start: 30px;
        font-size: 15px;
        font-weight: 500
    }

    .typepick .dropdown-item.on {
        background: var(--acc-t);
        color: var(--acc)
    }

    .typepick .sep {
        display: block;
        height: 1px;
        background: var(--bd2);
        margin: 8px 0
    }
}

/* the narrowest phones: the upload pill is just its "+" (the aria-label keeps its name) */
@media (max-width: 339px) {
    .nav .pill.upload span {
        display: none
    }
}

/* ============ poem pictures: the 'inline' layout ============
   settings.POEM_PICTURE_LAYOUT -> <body data-picture-layout> (katan_poetry_base.html).
   The default 'banner' layout is the mockup's: every poem picture fills a fixed-height
   box with object-fit:cover. Poem pictures are usually square or portrait, so that crop
   throws away the top and bottom of most of them.

   'inline' never crops a poem picture:
     - on the poem page it floats at the top-left of the text, at its own aspect ratio,
       and the poem wraps around it - the classic theme's layout (poetry_styles.css:411);
     - everywhere a poem picture is a card thumbnail it keeps its box, but the picture is
       letterboxed inside it (object-fit:contain) rather than cropped to fill it.
   These come after the page sections, and two attribute selectors outrank the one-attribute
   rules they override, so they win over both the base rules and their mobile overrides.
   Square avatars, block/tag/news pictures and the article hero are deliberately untouched. */

/* -- poem page: float top-left of the text (RTL, so the text wraps to its right) -- */
[data-picture-layout="inline"][data-page="poem"] .work img.pic {
    float: left;
    display: block;
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 550px;
    border-radius: 12px;
    margin: 2px 20px 20px 0
}

/* the poem is the only thing meant to wrap; a short one must still clear the picture */
[data-picture-layout="inline"][data-page="poem"] .poem::after {
    content: "";
    display: block;
    clear: both
}

/* -- card thumbnails: same box, letterboxed instead of cropped --
   .mini is deliberately NOT in this list. Its slot is a small square that the picture is
   meant to fill edge to edge, the way the list card's thumbnail does, so it keeps the
   object-fit:cover from '.mini .thumb img' in both layouts. Letterboxing something that
   small just prints a stamp on a grey tile. */
[data-picture-layout="inline"][data-page="list"] .wcard img.th,
[data-picture-layout="inline"][data-page="poem"] .more3 img,
[data-picture-layout="inline"][data-page="author"] .wlist img {
    object-fit: contain;
    background: var(--bg)
}

/* the homepage daily poem's picture is sized to its own aspect ratio instead of being
   letterboxed: inside a fixed box the rounded corners land on the grey padding, not on the
   picture, so it showed square corners. The base rule's height becomes the max-height. */
[data-picture-layout="inline"][data-page="home"] .hero .row img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 210px;
    margin: 0 auto
}

/* the list card's column is wide enough to give a portrait picture its full height. width
   must go with height:auto, or max-height squeezes the picture out of its aspect ratio. */
[data-picture-layout="inline"][data-page="list"] .wcard img.th {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 340px
}

@media (max-width: 640px) {
    /* no column to wrap into on a phone - centre it above the poem, as the classic theme does */
    [data-picture-layout="inline"][data-page="poem"] .work img.pic {
        float: none;
        margin: 2px auto 18px;
        max-width: min(260px, 100%);
        max-height: 420px
    }

    [data-picture-layout="inline"][data-page="list"] .wcard img.th {
        max-height: 300px
    }
}

/* ============ advertisement ============
   modern/_ad.html - the classic theme's homepage and sidebar ad. */
.ad {
    padding: 14px 16px 16px;
    text-align: center;
    margin-bottom: 18px
}

[data-page="home"] .ad {
    margin: 22px 0 0
}

.ad .ad-label {
    display: block;
    font-size: 12px;
    color: var(--mut);
    margin-bottom: 10px
}

.ad img {
    display: inline-block;
    width: 360px;
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm)
}

/* ============ notification bell ============
   With unread notifications the bell swings about its top a few times, then stops -
   the classic navbar's notificationsBellRing (poetry_styles.css), redefined here
   because the modern theme does not load that stylesheet. */
.nav .bell .ico.ring {
    transform-origin: 50% 15%;
    animation: modernBellRing 1.2s ease-in-out 10
}

@media (prefers-reduced-motion: reduce) {
    .nav .bell .ico.ring {
        animation: none
    }
}

@keyframes modernBellRing {
    0% {
        transform: rotate(0deg)
    }
    6% {
        transform: rotate(18deg)
    }
    12% {
        transform: rotate(-16deg)
    }
    18% {
        transform: rotate(14deg)
    }
    24% {
        transform: rotate(-12deg)
    }
    30% {
        transform: rotate(10deg)
    }
    36% {
        transform: rotate(-8deg)
    }
    42% {
        transform: rotate(6deg)
    }
    48% {
        transform: rotate(-4deg)
    }
    54% {
        transform: rotate(2deg)
    }
    60%, 100% {
        transform: rotate(0deg)
    }
}


/* ============ link hover, last word ============
   Every text link turns the theme's blue on hover. Last in the file on purpose: a link's
   colour usually comes from a rule like `.wlist .t a`, which has the same specificity as
   the rule below, and at equal specificity the later one wins.

   The exclusions are the links that are not text. A button, pill, chip, badge or icon
   button carries its own background and colour, and blue text on a coral button is not a
   hover effect but a bug. They sit inside :where(), which contributes no specificity of its
   own, so the whole selector still weighs exactly as much as a plain `a:hover` - enough to
   beat a class rule that paints the link, not enough to fight the chrome's own hover states.
   Links their container paints (there is one, .promo) are put back right after. */
a:not(:where(.btn, .pill, .chip, .k, .cta, .addban, .edit-poem, .ib,
             .dropdown-item, .dropdown-toggle, .skip, .on, .piclink, .avlink)):hover {
    color: var(--acc)
}

/* .promo styles its link from the container - a coral button with white text */
.promo a:hover {
    color: var(--on-acc)
}

/* ============ footer: the site version (plan 066) ============
   VERSION (env) when set: a centered middle column on desktop - 1fr | auto | 1fr keeps it in the
   true center whatever the widths of the copyright and the links. On phones it goes inline after
   the copyright instead, and the copyright line drops below the links. At the end of the file so it
   also beats the [data-page="home"] footer rules, which have the same specificity */
footer .wrap.has-ver {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center
}

footer .has-ver .links {
    justify-self: end
}

footer .ver-inline {
    display: none
}

@media (max-width: 640px) {
    footer .wrap,
    footer .wrap.has-ver {
        display: flex;
        flex-direction: column;
        align-items: flex-start
    }

    footer .copy {
        order: 2
    }

    footer .ver {
        display: none
    }

    footer .ver-inline {
        display: inline
    }
}

/* the version links to the release notes (plan 068) but looks exactly like the text around it: no
   footer-link margin (also beats [data-page="home"] footer a), no accent color on hover */
footer a.ver-link,
footer a.ver-link:hover {
    margin: 0;
    color: inherit
}

/* ---- page: poem-type-cards (/pages/poemTypes/, plan 076) ----
   the poem types as cards in the style of the tags page, grouped by main type; the picture is the
   card's first flex child, so in RTL it sits to the right of the text, both aligned to the top */
[data-page="poem-type-cards"] .single {
    padding: 22px 0 34px
}

[data-page="poem-type-cards"] .mtype {
    margin-top: 26px
}

/* the 26px separates one main type from the next; the first one sits right under the header */
[data-page="poem-type-cards"] .mtype:first-child {
    margin-top: 0
}

[data-page="poem-type-cards"] .mtype .hd {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--bd);
    margin-bottom: 14px
}

[data-page="poem-type-cards"] .mtype .hd h2 {
    font-size: 23px;
    font-weight: 800
}

[data-page="poem-type-cards"] .mtype .hd h2 a {
    color: var(--ink)
}

/* the number of works after a type's / main type's name */
[data-page="poem-type-cards"] .cnt {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--mut)
}

[data-page="poem-type-cards"] .mtype .hd .n {
    margin-right: auto;
    font-size: 13px;
    color: var(--mut)
}

[data-page="poem-type-cards"] .mtype .desc {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.7
}

[data-page="poem-type-cards"] .tgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: start
}

[data-page="poem-type-cards"] .tcard {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 13px 15px
}

/* the picture and the placeholder share a thin coral frame with rounded corners. The frame is on the link
   around them, not on the picture: the dark-mode inversion of the picture (plan 127) would recolour its own border.
   A type without a picture keeps the same square, so the text column lines up across the row */
[data-page="poem-type-cards"] .tcard .pic {
    flex: none;
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 10px;
    border: 1px solid var(--coral);
    overflow: hidden
}

[data-page="poem-type-cards"] .tcard .pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

[data-page="poem-type-cards"] .tcard .nopic {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bd2)
}

[data-page="poem-type-cards"] .tcard .in {
    flex: 1;
    min-width: 0
}

[data-page="poem-type-cards"] .tcard .t {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3
}

[data-page="poem-type-cards"] .tcard .t a {
    color: var(--ink)
}

[data-page="poem-type-cards"] .tcard .ex {
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.6;
    margin-top: 7px
}

/* the word limits and the display period: half a line under the description, in its style (plan 116) */
[data-page="poem-type-cards"] .tcard .facts {
    margin-top: .5em;
    font-size: 13px;
    color: var(--ink2);
    line-height: 1.6
}

[data-page="poem-type-cards"] .tcard .go {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--acc)
}

/* "לצפיה ביצירות" on the right, "הוספת יצירה" on the left, one line (plan 083).
   Not named .acts - that is the site-wide actions bar (top border, hidden in print). */
[data-page="poem-type-cards"] .tcard .tlinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 12px
}

[data-page="poem-type-cards"] .tcard .tlinks .add {
    margin-right: auto
}

/* the eye and plus icons: 2px over the usual .ico-sm (about 11px at the links' 13px) */
[data-page="poem-type-cards"] .tcard .tlinks .ico {
    width: calc(.85em + 2px);
    height: calc(.85em + 2px)
}

@media (max-width: 900px) {
    [data-page="poem-type-cards"] .tgrid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 640px) {
    [data-page="poem-type-cards"] .tgrid {
        grid-template-columns: 1fr
    }

    [data-page="poem-type-cards"] .mtype .hd h2 {
        font-size: 20px
    }
}


/* ============ dark color scheme (plan 123) ============
   The colors themselves come from Django_project_4/theme_colors.py (<html data-color-scheme>
   picks the column). These are the few dark-only rules a color variable cannot express.
   See .docs/features/123-2026-10-25-dark-mode.md. */
[data-color-scheme="dark"] {
    /* native controls, scrollbars, date pickers and autofill follow the scheme */
    color-scheme: dark
}

/* photos and pictures a little less bright on a dark page */
[data-color-scheme="dark"] img:not(.logo) {
    filter: brightness(.92)
}

/* header logo: the dark file when LOGO_WEBSITE_HEADER_DARK_STATIC_PATH is set (.has-dark-logo),
   otherwise the light logo on a light plate so its black letters stay visible */
.nav img.logo-dark {
    display: none
}

[data-color-scheme="dark"] .nav .brand.has-dark-logo img.logo-light {
    display: none
}

[data-color-scheme="dark"] .nav .brand.has-dark-logo img.logo-dark {
    display: block
}

[data-color-scheme="dark"] .nav .brand:not(.has-dark-logo) img.logo {
    background: var(--logo-plate);
    border-radius: 8px;
    padding: 2px 6px
}

/* poem type icons (plan 127): black line drawings on a white square. invert + hue-rotate turns the lines white and
   keeps the hues; lighten then drops the (now black) square into whatever is behind it, so the icon looks
   transparent. Only these four places - every other picture on the site is a photo and must never be inverted.
   Their coral frames are on wrappers, which the filter does not touch */
[data-color-scheme="dark"] [data-page="upload"] .fld .pt-ico,
[data-color-scheme="dark"] [data-page="poem-type-cards"] .tcard .pic img,
[data-color-scheme="dark"] [data-page="author"] .prof .n .works-by-type .pt-frame img,
[data-color-scheme="dark"] [data-page="me"] .hello .works-by-type .pt-frame img {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: lighten
}

/* the light/dark toggle: the icon and label show the scheme a click switches TO */
.scheme-toggle .when-dark,
[data-color-scheme="dark"] .scheme-toggle .when-light {
    display: none
}

[data-color-scheme="dark"] .scheme-toggle .when-dark {
    display: inline
}

.drawer .scheme-toggle .ico {
    margin-inline-end: 6px
}

/* authors' text colors in rich text (plan 124): a color the page script measured as unreadable on its
   background in the current scheme (data-ink-fix, thresholds in theme_colors.py) is shown in the theme's
   text color. !important beats the author's inline style; nothing stored changes. */
.rich-text [data-ink-fix] {
    color: var(--ink) !important
}