@charset "UTF-8";
/* Alegreya της Huerta Tipográfica (άδεια OFL, βλ. fonts/Alegreya-OFL.txt), από το Google Fonts. Σερβίρεται από
   το site και όχι από τη Google, ώστε η IP του επισκέπτη να μη φτάνει στη Google χωρίς συγκατάθεση.
   Μόνο τα ελληνικά και τα λατινικά· ο browser κατεβάζει όποιο χρειάζεται η σελίδα (unicode-range). */
@font-face {
    font-family: "Alegreya";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/alegreya-greek.woff2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: "Alegreya";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/alegreya-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;
}

/* Ο ουρανός της νύχτας: σκούρο μπλε με αστέρια στην κεφαλίδα, στην αρχή της αρχικής και στο footer, χρυσό
   μισοφέγγαρο για λογότυπο, μωβ για links και κουμπιά, και ανοιχτό λεβάντα στο φόντο, ώστε τα κείμενα να
   διαβάζονται άνετα. Χρώματα και μεγέθη σε ένα σημείο· το σκούρο θέμα αλλάζει μόνο τις μεταβλητές. */
:root {
    color-scheme: light;
    --bg: #f3f1f9;
    --surface: #ffffff;
    --text: #1f1c35;
    --heading: #262160;
    --muted: #625e7c;
    /* Το μωβ των links έχει αντίθεση πάνω από 7:1 σε λευκό. */
    --accent: #5b3cc4;
    --accent-soft: #ebe6fb;
    --border: #e2ddf2;
    --rule: #c9c1e6;
    --star: #e0a91f;
    /* Ο ουρανός και το φεγγάρι. Τα κείμενα πάνω στον ουρανό είναι ανοιχτά και στα δύο θέματα. */
    --sky: #171b44;
    --sky-2: #272b6a;
    --sky-3: #3a2f7c;
    --on-sky: #ecebff;
    --on-sky-muted: #b4b1dc;
    --moon: #f3c75c;
    --horizon: 1px solid rgb(243 199 92 / .45);
    --stars:
        radial-gradient(circle at 7% 28%, rgb(255 255 255 / .8) 0 1px, transparent 1.7px),
        radial-gradient(circle at 18% 74%, rgb(255 255 255 / .55) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 29% 20%, rgb(255 255 255 / .7) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 41% 66%, rgb(255 255 255 / .8) 0 1px, transparent 1.7px),
        radial-gradient(circle at 54% 16%, rgb(255 255 255 / .55) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 63% 80%, rgb(255 255 255 / .7) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 76% 30%, rgb(255 255 255 / .8) 0 1px, transparent 1.7px),
        radial-gradient(circle at 88% 70%, rgb(255 255 255 / .55) 0 .8px, transparent 1.5px),
        radial-gradient(circle at 96% 22%, rgb(255 255 255 / .7) 0 .8px, transparent 1.5px);
    --shadow: 0 1px 2px rgb(31 26 90 / .06), 0 6px 20px rgb(31 26 90 / .07);
    --radius: 14px;
    --header-height: 3.5rem;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    /* Της Alegreya το site έχει μόνο το κανονικό βάρος, οπότε οι τίτλοι δεν είναι bold. */
    --serif: "Alegreya", Georgia, "Noto Serif", "Times New Roman", serif;
}

/* Το σκούρο θέμα το διαλέγει ο επισκέπτης από την κεφαλίδα (theme.js) και δεν ακολουθεί τη ρύθμιση της συσκευής. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1127;
    --surface: #181b39;
    --text: #e7e5f6;
    --heading: #f0eeff;
    --muted: #a6a2c6;
    --accent: #b9a8ff;
    --accent-soft: #29265a;
    --border: #2b2e58;
    --rule: #464a85;
    --sky: #0a0c20;
    --sky-2: #141841;
    --sky-3: #221d52;
    --shadow: none;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
    /* Η αρχή της αρχικής (.hero) απλώνεται σε όλο το πλάτος της οθόνης χωρίς οριζόντια κύλιση. */
    overflow-x: clip;
    /* Το footer μένει στο κάτω μέρος της οθόνης και στις σύντομες σελίδες (π.χ. 404). */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--accent); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

.wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Κεφαλίδα: ο ουρανός, με μια χρυσή γραμμή για ορίζοντα. */
.site-header {
    background: var(--stars), linear-gradient(var(--sky), var(--sky-2));
    color: var(--on-sky);
    border-bottom: var(--horizon);
}

.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    padding-block: .75rem;
}

.site-name {
    display: inline-flex;
    align-items: center;
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--on-sky);
    text-decoration: none;
    white-space: nowrap;
}

.site-name span { color: var(--moon); }

.logo {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    margin-right: .45rem;
    fill: var(--moon);
    filter: drop-shadow(0 0 6px rgb(243 199 92 / .45));
}

.site-nav { display: flex; flex-wrap: wrap; gap: .25rem .85rem; }
.site-nav a { color: var(--on-sky); font-size: 1rem; font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--moon); }

/* Το όνομα, τα τρία links και η αναζήτηση δεν χωρούν σε μία γραμμή στα 960px: στον υπολογιστή τα links έχουν
   δική τους γραμμή κάτω από το όνομα, και η αναζήτηση πάει δεξιά, δίπλα στο κουμπί του θέματος. */
@media (min-width: 1024px) {
    .site-header .site-nav {
        order: 1;
        flex-basis: 100%;
        gap: .25rem 1.75rem;
        padding-top: .45rem;
        border-top: 1px solid rgb(255 255 255 / .1);
    }

    .site-header .search-form { margin-left: auto; }
}

/* Στο admin η κεφαλίδα έχει και το όνομα του χρήστη. */
.site-header .muted { color: var(--on-sky-muted); }

.icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.icon-button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--accent);
    cursor: pointer;
}

.icon-button:hover { background: var(--accent-soft); }
.icon-button .icon { width: 1.5rem; height: 1.5rem; }

.site-header .icon-button,
.menu-head .icon-button { color: var(--on-sky); }

.site-header .icon-button:hover,
.menu-head .icon-button:hover { background: rgb(255 255 255 / .12); }

/* Χωρίς JavaScript το κουμπί δεν θα έκανε τίποτα, οπότε φαίνεται μόνο όταν το theme.js έχει βάλει data-theme. */
.theme-toggle { display: none; }
[data-theme] .theme-toggle { display: grid; }
.theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Κεφαλίδα στο κινητό: λογότυπο και δύο κουμπιά, για αναζήτηση και πλαϊνό μενού (popovers).
   Σε browser χωρίς popover (iOS πριν από το 17) μένει η κεφαλίδα του υπολογιστή, που απλώς πιάνει περισσότερο χώρο. */
.header-buttons,
.search-bar,
.site-menu { display: none; }

@supports selector(:popover-open) {
    @media (max-width: 1023px) {
        .site-header .wrap:has(> .header-buttons) { flex-wrap: nowrap; column-gap: .25rem; min-height: var(--header-height); padding-block: 0; }
        .theme-toggle { margin-left: auto; }
        .site-header .header-wide { display: none; }
        .header-buttons { display: flex; gap: .25rem; margin-right: -.5rem; }
    }

    .search-bar:popover-open,
    .site-menu:popover-open { display: block; }
}

/* Στα στενά κινητά όλο το όνομα δεν χωρά δίπλα στα τρία κουμπιά· μένει το «Ονειροκρίτης». */
@media (max-width: 479px) {
    .site-name { font-size: 1.45rem; }
    .site-name span { display: none; }
}

/* Η μπάρα ακολουθεί τη σελίδα (absolute, όχι fixed), ώστε να είναι πάντα ακριβώς κάτω από την κεφαλίδα. */
.search-bar {
    position: absolute;
    inset: calc(var(--header-height) + 1px) 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: .75rem 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow);
    overflow: visible;
}

.search-bar::backdrop,
.site-menu::backdrop { background: rgb(10 12 32 / .45); }

.site-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 85vw);
    height: auto;
    margin: 0;
    padding: 0 1rem 2rem;
    border: 0;
    border-left: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: translate .2s ease-out, display .2s allow-discrete, overlay .2s allow-discrete;
}

@starting-style {
    .site-menu:popover-open { translate: 100% 0; }
}

.site-menu:not(:popover-open) { translate: 100% 0; }

@media (prefers-reduced-motion: reduce) {
    .site-menu { transition: none; }
}

body:has(.site-menu:popover-open) { overflow: hidden; }

.menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    margin: 0 -1rem .25rem;
    padding: 0 .5rem 0 1rem;
    border-bottom: var(--horizon);
    background: var(--stars), linear-gradient(var(--sky), var(--sky-2));
    color: var(--on-sky);
}

.menu-title { font-family: var(--serif); font-size: 1.35rem; }

.menu-links { margin: 0; padding: 0; list-style: none; }
.menu-links > li { border-bottom: 1px solid var(--border); }

.menu-links > li > a {
    display: block;
    padding: .7rem 0;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
}

.menu-links > li > a:hover { color: var(--accent); }

.site-menu .letters {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-items: center;
    margin: 0 0 1rem;
}

.site-menu .letters a { width: 100%; max-width: 2.5rem; height: auto; aspect-ratio: 1; }

.site-main { flex: 1 0 auto; width: 100%; padding-block: 1.75rem 3rem; }

.site-footer {
    background: var(--stars), linear-gradient(var(--sky-2), var(--sky));
    border-top: var(--horizon);
    color: var(--on-sky-muted);
    font-size: .9rem;
    padding-block: 2rem;
}

.site-footer .muted { color: var(--on-sky-muted); }
.site-footer strong { color: var(--on-sky); font-weight: 600; }

/* Τίτλοι */
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.2; color: var(--heading); }
h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin: .5rem 0 1rem; }
h2 { font-size: 1.6rem; margin-top: 2.5rem; }

.eyebrow {
    display: block;
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

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

/* Διαδρομή */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
    color: var(--muted);
}

.breadcrumbs li + li::before { content: "›"; margin-right: .25rem; }
.breadcrumbs a { color: var(--muted); }

/* Γράμματα του ονειροκρίτη: στρογγυλά, σαν μικρά φεγγάρια. Το τρέχον γράμμα γίνεται νύχτα με χρυσό γράμμα. */
.letters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1.25rem 0;
}

.letters a {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--heading);
    font-family: var(--serif);
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
}

.letters a:hover,
.letters a[aria-current="page"] {
    border-color: var(--sky-2);
    background: radial-gradient(circle at 35% 30%, var(--sky-3), var(--sky));
    color: var(--moon);
}

/* Στο λήμμα: πάνω από το κείμενο στον υπολογιστή, μετά από αυτό στο κινητό. */
@media (max-width: 799px) {
    .letters-top { display: none; }
}

@media (min-width: 800px) {
    .letters-after { display: none; }
}

/* Λίστες. Κάθε όνειρο έχει μπροστά μια μικρή τελεία, σαν αστέρι. */
.item-columns {
    columns: 3 14rem;
    column-gap: 2rem;
    padding: 0;
    list-style: none;
}

.item-columns li { position: relative; break-inside: avoid; padding: .2rem 0 .2rem .95rem; }

.item-columns li::before {
    position: absolute;
    top: .86em;
    left: .1rem;
    width: .32rem;
    height: .32rem;
    border-radius: 50%;
    background: var(--rule);
    content: "";
}

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem;
    padding: 0;
    list-style: none;
}

.card-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    height: 100%;
    padding: .9rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    font-weight: 600;
    text-decoration: none;
}

.card-list a:hover { border-color: var(--accent); }

/* Πόσα όνειρα έχει κάθε θέμα. */
.tag-list .muted {
    min-width: 2.25rem;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
    text-align: center;
}

/* Λήμμα: λευκή κάρτα, με μια λωρίδα από το μωβ της νύχτας ως το χρυσό του φεγγαριού. */
.entry {
    margin-top: 1rem;
    padding: clamp(1.1rem, 3.5vw, 2.25rem);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    background: linear-gradient(90deg, var(--accent), var(--moon)) top / 100% 4px no-repeat, var(--surface);
    box-shadow: var(--shadow);
}

/* Κόσμημα κάτω από τον τίτλο: το μισοφέγγαρο του λογότυπου ανάμεσα σε δύο γραμμές. */
.entry h1::after {
    display: block;
    width: 8rem;
    height: 1rem;
    margin-top: .75rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 16'%3E%3Cpath d='M0 8h50M78 8h50' stroke='%23d9b45a'/%3E%3Cg fill='%23d9b45a' transform='translate(57 0) scale(.5)'%3E%3Cpath d='M11.9 6.2A11 11 0 1 0 24.5 20.2A9.5 9.5 0 0 1 11.9 6.2Z'/%3E%3Cpath d='M24.5 3l1.1 3.4 3.4 1.1-3.4 1.1-1.1 3.4-1.1-3.4-3.4-1.1 3.4-1.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;
    content: "";
}

/* Ο τίτλος του λήμματος («Φίδι») ανάμεσα στο h1 και στο κείμενο. */
.entry-question { max-width: 44rem; margin: 0 0 1.25rem; font-size: 1.6rem; color: var(--accent); }

/* Γύρω στους 70 χαρακτήρες ανά γραμμή, που διαβάζονται άνετα και στον υπολογιστή. */
.entry-body { max-width: 44rem; font-size: 1.125rem; }

/* Το παλιό περιεχόμενο έχει inline text-align: justify, που στο κινητό αφήνει μεγάλα κενά.
   Τα inline styles νικούν το CSS, εκτός αν χρησιμοποιηθεί !important. */
.entry-body p,
.category-intro p { margin: 0 0 1rem; text-align: start !important; }

.song {
    margin: 1.25rem 0;
    padding: .6rem .9rem;
    background: var(--accent-soft);
    border-radius: var(--radius);
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .9rem;
}

/* Τα θέματα του λήμματος, σαν ετικέτες. */
.entry-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 1rem 0 0;
}

.entry-tags a {
    padding: .15rem .75rem;
    border-radius: 999px;
    background: var(--accent-soft);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.entry-tags a:hover { background: var(--accent); color: var(--surface); }

.star { color: var(--border); }
.star.on { color: var(--star); }

.prev-next {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0;
}

.prev-next a {
    padding: .45rem .95rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    text-decoration: none;
}

.prev-next a:hover { border-color: var(--accent); }
.prev-next .next { margin-left: auto; text-align: right; }

/* Σχόλια: τα όνειρα των επισκεπτών, σε κάρτες. */
.comment {
    margin: 1rem 0;
    padding: .85rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.comment header {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: baseline;
}

.comment header strong { color: var(--heading); }
.comment time { color: var(--muted); font-size: .85rem; }
.comment p { margin: .4rem 0; }

.category-intro { color: var(--muted); }

.lead { font-size: 1.15rem; color: var(--muted); margin-top: -.5rem; }
.small { font-size: .875rem; }

/* Πλοήγηση στο admin (σχόλια, 404) */
.pill-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1.5rem;
}

.pill-nav a {
    padding: .35rem .85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .95rem;
    text-decoration: none;
}

.pill-nav a[aria-current="page"],
.pill-nav a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Αρχική: ο ουρανός της κεφαλίδας συνεχίζει σε όλο το πλάτος, με το φεγγάρι δεξιά. Το αρνητικό margin-top
   ακυρώνει το padding του .site-main, ώστε ο ουρανός να μη διακόπτεται. */
.hero {
    position: relative;
    margin: -1.75rem calc(50% - 50vw) 1.5rem;
    padding: 2rem calc(50vw - 50%) 2.5rem;
    background: var(--stars), linear-gradient(var(--sky-2), var(--sky-3));
    color: var(--on-sky);
}

.hero h1 { margin-top: 0; color: var(--on-sky); letter-spacing: .02em; }
.hero .lead { margin: -.25rem 0 0; color: var(--on-sky-muted); font-size: 1.35rem; }
.hero .search-form.big { margin: 1.5rem 0 0; }
.hero .search-form input { border-color: rgb(255 255 255 / .18); }

/* Στο κινητό το φεγγάρι είναι αχνό, πίσω από τον τίτλο· από 720px έχει δική του στήλη. */
.hero-moon {
    position: absolute;
    top: 1rem;
    right: .75rem;
    width: 7rem;
    height: 7rem;
    fill: var(--moon);
    opacity: .2;
    pointer-events: none;
}

@media (min-width: 720px) {
    .hero {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 2.5rem;
        align-items: center;
    }

    .hero > :not(.hero-moon) { grid-column: 1; }

    .hero-moon {
        position: static;
        grid-column: 2;
        grid-row: 1 / span 3;
        width: clamp(6.5rem, 14vw, 9.5rem);
        height: auto;
        opacity: 1;
        filter: drop-shadow(0 0 28px rgb(243 199 92 / .4));
    }
}

.home-intro { max-width: 46rem; }

.panel {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel h2 { margin-top: 0; font-size: 1.15rem; }
.panel h3 { margin-top: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }

.today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

/* Πίνακες */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 1rem 0 1.5rem;
}

.data-table th,
.data-table td {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
}

.data-table th { font-size: .85rem; color: var(--muted); font-weight: 600; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .past { color: var(--muted); }

/* Ένας πίνακας που δεν χωρά κυλά οριζόντια μέσα στο πλαίσιό του. Αλλιώς φάρδαινε όλη τη σελίδα στο κινητό, και το
   κουμπί του μενού έβγαινε από την οθόνη (Πολιτική Cookies). */
.table-scroll { overflow-x: auto; margin: 1rem 0 1.5rem; }
.table-scroll > .data-table { margin: 0; }

@media (max-width: 520px) {
    .data-table th,
    .data-table td { padding: .5rem .6rem; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Αναζήτηση */
.search-form { display: flex; gap: .4rem; position: relative; }

.search-form input {
    flex: 1;
    min-width: 0;
    padding: .45rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.search-form button {
    padding: .45rem .95rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--surface);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.site-header .search-form { flex: 1 1 12rem; min-width: 0; max-width: 18rem; }

/* Η κεφαλίδα του υπολογιστή χωρά στα 960px της σελίδας μαζί με το κουμπί του θέματος μόνο με λίγο μικρότερα
   γράμματα· αλλιώς το πεδίο στενεύει και το «Αναζήτηση ονείρου…» κόβεται. */
.site-header .search-form input { font-size: 1rem; }

/* Στον ουρανό το πεδίο είναι διάφανο και το κουμπί έχει το χρυσό του φεγγαριού. */
.site-header .search-form input {
    border-color: rgb(255 255 255 / .25);
    background: rgb(255 255 255 / .1);
    color: var(--on-sky);
}

.site-header .search-form input::placeholder { color: var(--on-sky-muted); }

.site-header .search-form button,
.hero .search-form button { background: var(--moon); color: var(--sky); }

.search-form.big { max-width: 36rem; margin: 1rem 0 1.5rem; }
.search-form.big input,
.search-form.big button { padding: .7rem 1.1rem; font-size: 1.05rem; }

.search-form.big button { display: inline-flex; align-items: center; gap: .4rem; }

/* Στο κινητό το κουμπί δείχνει μόνο το εικονίδιο, ώστε να χωρά ολόκληρο το κείμενο του πεδίου. */
@media (max-width: 520px) {
    .search-form.big .button-label { display: none; }
}
.search-bar .search-form input,
.search-bar .search-form button { padding: .6rem .85rem; }

/* Προτάσεις κάτω από το πεδίο (suggest.js) */
.suggest-list {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: min(28rem, 70vh);
    overflow-y: auto;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgb(10 12 32 / .2);
}

.suggest-list a {
    display: block;
    padding: .5rem .85rem;
    color: var(--text);
    text-decoration: none;
}

.suggest-list a:hover,
.suggest-list [aria-selected="true"] a { background: var(--accent-soft); color: var(--accent); }

.results { padding-left: 1.25rem; }
.results li { margin-bottom: 1rem; }
.results a { font-size: 1.1rem; font-weight: 600; }
.results p { margin: .2rem 0 0; }

h2 a { color: inherit; text-decoration: none; }

/* Μηνύματα */
.notice {
    padding: .7rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
}

.notice.success { border-color: #3f8f5a; }
.notice.error { border-color: #c0392b; }
.notice.error ul { margin: 0; padding-left: 1.1rem; }
.validation-summary-valid { display: none; }

/* Βαθμολογία */
.rating { margin-top: .75rem; }
.rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rate-stars { display: inline-flex; flex-direction: row-reverse; }

.rate-stars button {
    padding: 0 .1rem;
    border: 0;
    background: none;
    color: var(--muted);
    opacity: .45;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.rate-stars button:hover,
.rate-stars button:hover ~ button,
.rate-stars button:focus-visible,
.rate-stars button:focus-visible ~ button { color: var(--star); opacity: 1; }

/* Φόρμα σχολίου */
.comment-form form { display: grid; gap: .5rem; }
.comment-form label { font-weight: 600; }
.comment-form label.check { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }

.comment-form input:not([type=checkbox]),
.comment-form textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.comment-form input[type=checkbox] { margin-top: .35rem; }

.comment-form button {
    justify-self: start;
    padding: .6rem 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: var(--surface);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgb(255 255 255 / .12);
}

.footer-links a,
.footer-links .link-button { color: var(--on-sky); }

.footer-links a:hover,
.footer-links .link-button:hover { color: var(--moon); }

.link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Διαφημίσεις: σταθερό ελάχιστο ύψος, ώστε η σελίδα να μη «χοροπηδά» όταν φορτώνει η διαφήμιση (CLS). */
.ad { margin: 1.5rem 0; min-height: 100px; text-align: center; }
.ad-label { display: block; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.ad-placeholder {
    display: grid;
    place-items: center;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: .9rem;
}

/* Νομικές σελίδες */
.legal { max-width: 46rem; }
.legal li { margin-bottom: .4rem; }
mark.todo { background: #c0392b; color: #fff; padding: 0 .3rem; border-radius: 4px; }

/* Admin */
.admin-main { max-width: 1200px; }
.admin .site-header .wrap { max-width: 1200px; }
.logout { display: flex; align-items: center; gap: .5rem; }

.admin button,
.button-link {
    padding: .45rem .9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--surface);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.admin button.secondary { background: none; color: var(--accent); }
.admin button.danger { background: none; border-color: #c0392b; color: #c0392b; }

.admin .link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-weight: 400;
    text-decoration: underline;
}

.admin .site-header .link-button { color: var(--on-sky); }

.admin .danger-text { color: #c0392b; }

.admin input:not([type=checkbox]),
.admin select,
.admin textarea {
    padding: .45rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.inline-form .notice { flex-basis: 100%; }

.edit-form { display: grid; gap: .4rem; }
.edit-form label { font-weight: 600; margin-top: .5rem; }
.edit-form label.check { font-weight: 400; }
.edit-form input:not([type=checkbox]),
.edit-form select,
.edit-form textarea { width: 100%; }
.edit-form select.narrow { width: auto; min-width: 12rem; }
.edit-form button { justify-self: start; margin-top: .75rem; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

.two-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }

.login-panel { max-width: 26rem; margin: 3rem auto; }
.login-panel form { display: grid; gap: .4rem; }
.login-panel button { justify-self: start; margin-top: .75rem; }
.field-error { color: #c0392b; font-size: .875rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { display: grid; text-decoration: none; color: var(--text); }
.stat-num { font-family: var(--serif); font-size: 2rem; color: var(--accent); }

.data-table.compact th,
.data-table.compact td { padding: .4rem .6rem; }
.data-table .actions { white-space: nowrap; text-align: end; }
.data-table .actions a + a { margin-left: .5rem; }
.data-table td.break { overflow-wrap: anywhere; max-width: 22rem; }
.data-table .actions .inline-form { flex-wrap: nowrap; justify-content: flex-end; margin-bottom: .25rem; }
.data-table .actions .inline-form input { width: 16rem; }

.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0; }
.moderation-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.moderation-list header { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.comment-body { white-space: pre-wrap; margin: .5rem 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.row-actions button { padding: .3rem .7rem; font-size: .9rem; }
.input-validation-error { border-color: #c0392b !important; }
h3 { font-size: 1.1rem; margin-top: 1.5rem; }