/* Cigarrsalongen — bastema.
 * Endast tokens ur tokens.css. Inga hårdkodade färger.
 * Mobil först: allt nedan gäller från 390 px, breakpoints växer uppåt.
 */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--surface-page);
    /* Rökslöjan (mockup 1 och 3) som gradienter i stället för smoke.png —
     * docs/ASSETS.md avsnitt 3. */
    background-image:
        radial-gradient(60% 34% at 50% 10%, var(--smoke-near) 0%, transparent 70%),
        radial-gradient(46% 30% at 76% 40%, var(--smoke-far) 0%, transparent 72%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--size-body);
    font-weight: var(--weight-body);
    line-height: var(--leading-body);
    overflow-x: hidden;
}

/* Ekpanelerna längs kanterna. Dolda på mobil (--edge-width: 0) så inget skapar
 * horisontell scroll vid 390 px. */
body::before,
body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--edge-width);
    background-color: var(--surface-edge);
    background-image: url("/assets/edge-oak.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    pointer-events: none;
    z-index: 0;
}

body::before {
    left: 0;
    box-shadow: inset -12px 0 24px -12px var(--surface-deep);
}

body::after {
    right: 0;
    box-shadow: inset 12px 0 24px -12px var(--surface-deep);
}

.shell {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding: 0 var(--edge-width);
}

.wrap {
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

a {
    color: var(--accent-strong);
    text-decoration-color: var(--accent-dim);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--text-strong);
}

img {
    max-width: 100%;
}

:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-heading);
    line-height: var(--leading-tight);
    color: var(--text-strong);
    margin: 0 0 var(--space-4);
}

h1 {
    font-size: var(--size-h1);
}

h2 {
    font-size: var(--size-h2);
    font-weight: var(--weight-display);
}

h3 {
    font-size: var(--size-body);
}

.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    left: var(--space-4);
    top: var(--space-4);
    z-index: 2;
    background: var(--surface-sunken);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}

/* --- Sidhuvud och logotyp ---------------------------------------------- */

.masthead {
    padding: var(--space-5) 0 var(--space-4);
}

.masthead__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
    justify-content: space-between;
}

/* Logotypen är ren typografi (SPEC avsnitt 7, docs/ASSETS.md avsnitt 4): "Clagshamn"
 * i off-white ovanför "COCKTAIL CLUB" i bärnsten, versaler med bred spärrning. */
.logo {
    display: inline-block;
    text-decoration: none;
    line-height: 1;
}

.logo__name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--size-logo);
    font-weight: var(--weight-display);
    letter-spacing: 0.01em;
    color: var(--text-strong);
}

.logo__club {
    display: block;
    margin-top: var(--space-2);
    padding-left: 0.2em;
    font-family: var(--font-display);
    font-size: var(--size-label);
    font-weight: var(--weight-body);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--accent);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--size-nav);
    font-weight: var(--weight-body);
}

.nav__link {
    color: var(--text);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}

.nav__link:hover {
    color: var(--accent);
}

.nav__link[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.nav__link--pending {
    color: var(--text-muted);
}

/* --- Innehåll ----------------------------------------------------------- */

.main {
    flex: 1 0 auto;
    /* Luften mellan logotyp och sidrubrik är tydlig i mockup 2 och 13. Hero-sektionen
     * har sin egen luft och lägger därför inte på mer i överkant. */
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
}

.hero {
    padding: 0 0 var(--space-6);
    text-align: center;
}

.hero__title {
    font-size: var(--size-hero);
    margin-bottom: var(--space-2);
}

.hero__lead {
    max-width: 36rem;
    margin: 0 auto;
    color: var(--text);
}

.section {
    margin-top: var(--space-6);
}

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.meta {
    color: var(--text-muted);
    font-size: var(--size-small);
}

/* --- Kort med bildyta --------------------------------------------------- */
/* Mockup 1: ett brett kort per cocktail, foto under en toning som är tät till vänster
 * där namnet ligger och genomskinlig till höger där glaset står. Bildytan finns alltid
 * — saknas fotot visas web/assets/_placeholder.jpg, se theme/image.php. */

.card-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--ratio-card);
    background-color: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
}

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

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

.card__scrim {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        to right,
        var(--scrim-solid) 0%,
        var(--scrim-solid) 28%,
        var(--scrim-soft) 52%,
        var(--scrim-clear) 76%
    );
}

.card__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4);
}

.card__name {
    font-family: var(--font-display);
    font-size: var(--size-h2);
    font-weight: var(--weight-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-card);
    text-transform: uppercase;
    color: var(--text-strong);
}

/* --- Miniatyrer: "More with …" (mockup 3) ------------------------------- */

.thumb-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, 1fr);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.thumb {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--ratio-thumb);
    background-color: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.thumb:hover {
    border-color: var(--accent-dim);
}

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

.thumb__name {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--space-5) var(--space-3) var(--space-2);
    background-image: linear-gradient(
        to top,
        var(--scrim-solid) 0%,
        var(--scrim-soft) 55%,
        var(--scrim-clear) 100%
    );
    font-family: var(--font-display);
    font-size: var(--size-small);
    line-height: var(--leading-tight);
    color: var(--text-strong);
}

/* --- Listor (cocktailindex, mockup 2) ----------------------------------- */

.list {
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
}

.list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
}

.list__name {
    font-family: var(--font-display);
    font-size: var(--size-h2);
    font-weight: var(--weight-display);
    color: var(--text-strong);
    text-decoration: none;
}

.list__name:hover {
    color: var(--accent);
}

/* --- Chips och taggar --------------------------------------------------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    background-color: var(--accent);
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-size: var(--size-small);
    text-decoration: none;
}

.tag {
    display: inline-block;
    padding: 0 var(--space-2);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Taggen ovanpå ett kort ligger på foto och behöver en egen botten. */
.card .tag {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--size-small);
    letter-spacing: 0;
    text-transform: none;
}

/* --- Sidfot ------------------------------------------------------------- */

.footer {
    flex-shrink: 0;
    border-top: 1px solid var(--line);
    background-color: var(--surface-sunken);
    padding: var(--space-5) 0 var(--space-6);
    color: var(--text-muted);
    font-size: var(--size-small);
}

.footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

.logo--footer .logo__name {
    font-size: var(--size-h2);
}

.footer__legal {
    margin: 0;
}

/* --- Feltillstånd ------------------------------------------------------- */

.notice {
    margin-top: var(--space-6);
    padding: var(--space-6) var(--space-5);
    background-color: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}

.notice__code {
    font-family: var(--font-display);
    font-size: var(--size-hero);
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-label);
    color: var(--accent);
    margin: 0;
}

/* --- Hjälpklasser ------------------------------------------------------- */

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

/* --- Sök och filter ----------------------------------------------------- */

.search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
}

.search--hero {
    justify-content: center;
    max-width: 36rem;
    margin-top: var(--space-5);
    margin-inline: auto;
}

.search__input,
.search__select {
    flex: 1 1 12rem;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface-sunken);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
    color: var(--text);
    font-family: inherit;
    font-size: var(--size-body);
}

.search__input {
    flex: 1 1 10rem;
}

.search__select {
    flex-grow: 0;
}

.search__input::placeholder {
    color: var(--text-muted);
}

.button {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background-color: var(--accent);
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-size: var(--size-body);
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background-color: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--text-on-accent);
}

.chips--filters {
    margin-top: var(--space-3);
}

.chip--filter:hover {
    background-color: var(--accent-strong);
    color: var(--text-on-accent);
}

/* --- A–Ö-strip och bokstavsgrupper -------------------------------------- */

.alpha {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background-color: var(--accent);
    border-radius: var(--radius-sm);
}

.alpha__letter {
    font-family: var(--font-display);
    font-size: var(--size-small);
    letter-spacing: var(--tracking-label);
    color: var(--text-on-accent);
    text-decoration: none;
}

.alpha__letter:hover {
    color: var(--surface-page);
    text-decoration: underline;
}

.alpha__letter--empty {
    opacity: 0.35;
}

.letter {
    margin-top: var(--space-5);
    scroll-margin-top: var(--space-4);
}

.letter__heading {
    margin-bottom: 0;
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--line-strong);
    color: var(--accent);
    letter-spacing: var(--tracking-label);
}

/* --- Tom sökning (mockup 15) -------------------------------------------- */

.empty {
    margin: var(--space-6) auto var(--space-7);
    max-width: 34rem;
    text-align: center;
}

.empty__figure {
    margin: 0 auto var(--space-5);
    max-width: 16rem;
}

.empty__figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    opacity: 0.7;
}

.empty__title {
    font-size: var(--size-hero);
    margin-bottom: var(--space-2);
}

/* --- Receptsidan (mockup 3) --------------------------------------------- */

.breadcrumb {
    margin-top: var(--space-4);
    color: var(--text-muted);
    font-size: var(--size-small);
}

.breadcrumb a {
    text-decoration: none;
}

.recipe__head h1 {
    margin-bottom: var(--space-1);
}

.recipe__spirit {
    margin: 0 0 var(--space-5);
    font-family: var(--font-display);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.recipe__spirit a {
    text-decoration: none;
}

.recipe__body {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    align-items: start;
}

.recipe__figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--surface-deep);
}

.recipe__figure img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio-photo);
    object-fit: cover;
}

.recipe__detail h2 {
    margin-bottom: var(--space-2);
}

.ingredients,
.method {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-5);
}

.ingredients li,
.method li {
    margin-bottom: var(--space-1);
}

.serve {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0 0 var(--space-5);
}

.serve dt {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-size: var(--size-small);
    color: var(--text-muted);
}

.serve dd {
    margin: 0;
}

.subrecipe {
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border: 1px solid var(--accent-dim);
    border-radius: var(--radius);
    background-color: var(--surface-sunken);
}

.subrecipe__name {
    margin-bottom: var(--space-3);
    font-size: var(--size-h2);
    color: var(--accent-strong);
}

.subrecipe .ingredients:last-child,
.subrecipe .method:last-child,
.subrecipe .meta:last-child {
    margin-bottom: 0;
}

.source {
    color: var(--text-muted);
    font-size: var(--size-small);
}

/* --- Om klubben (mockup 13) --------------------------------------------- */

.about {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: 1fr;
    align-items: start;
    margin-top: var(--space-5);
}

.prose {
    max-width: 34rem;
}

.prose p {
    font-size: var(--size-lead);
}

.about__figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
}

.about__figure img {
    display: block;
    width: 100%;
    /* Utan height: auto blir attributet height="1200" en fast höjd, och aspect-ratio
     * ignoreras — bilden blev en smal remsa av väggen (upptäckt när about.jpg kom). */
    height: auto;
    aspect-ratio: var(--ratio-photo);
    object-fit: cover;
}

.signin {
    margin-top: var(--space-6);
    text-align: center;
}

/* --- Feltillståndets sökfält -------------------------------------------- */

.notice .search {
    justify-content: center;
}

/* --- Breakpoints -------------------------------------------------------- */

@media (min-width: 48rem) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .thumb-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .list {
        column-gap: var(--space-6);
        grid-template-columns: repeat(2, 1fr);
    }

    .recipe__body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-6);
    }

    .about--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-6);
    }

    .alpha {
        padding: var(--space-2) var(--space-5);
    }

    .alpha__letter {
        font-size: var(--size-body);
    }

    .footer__inner {
        gap: var(--space-3);
    }
}

@media (min-width: 64rem) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================================================================================
 * Inloggat läge (SPEC-CCC.md avsnitt 6, mockup 5–9).
 *
 * Komponenterna nedan syns bara för en inloggad besökare. De använder samma tokens som
 * resten av temat och lägger inte till några nya färger.
 * ================================================================================== */

/* Brickan med initialer i navigationen och på receptsidans metarad. */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    margin-left: var(--space-2);
    border-radius: var(--radius-pill);
    background-color: var(--accent);
    color: var(--text-on-accent);
    font-family: var(--font-display);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    vertical-align: middle;
}

.avatar--small {
    margin-left: 0;
    margin-right: var(--space-1);
}

.button--small {
    padding: var(--space-1) var(--space-4);
    font-size: var(--size-small);
}

/* --- Startsidans klubbdel: senaste tillfället + tidigare tillfällen ---------------- */

.tasting-latest__title {
    margin-bottom: var(--space-1);
}

.tasting-latest__body {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

.previous {
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.previous__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--size-h2);
    font-weight: var(--weight-display);
    color: var(--text-strong);
}

.previous__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.previous__list li {
    border-bottom: 1px solid var(--line);
}

.previous__list a {
    display: block;
    padding: var(--space-3) 0;
    text-decoration: none;
}

/* --- Kort för en serverad cocktail: bild, namn, bassprit, mixolog ------------------ */

.served-grid {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.served-grid > li {
    display: flex;
}

.served {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
    align-items: stretch;
    /* Korten i en rad ska bli lika höga även när ett namn radbryts (mockup 5 och 7). */
    min-height: 8rem;
    height: 100%;
    overflow: hidden;
    background-color: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.served:hover {
    border-color: var(--accent-dim);
}

/* Ingen aspect-ratio här: bilden ska följa kortets höjd, inte bestämma den. */
.served__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.served__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}

.served__name {
    font-family: var(--font-display);
    font-size: var(--size-h2);
    font-weight: var(--weight-display);
    line-height: var(--leading-tight);
    color: var(--text-strong);
}

.served__by {
    color: var(--accent);
    font-size: var(--size-small);
}

/* Närvarande utan recept: samma kort, men ingen länk, streckad kant och dämpad text.
 * Bilden är samma tomma glas som en drink utan genererat foto, så skillnaden måste bäras
 * av kanten och texten. */
.served--missing {
    border-style: dashed;
    border-color: var(--line-strong);
}

.served--missing:hover {
    border-color: var(--line-strong);
}

.served--missing .served__media {
    opacity: 0.6;
}

.served__name--missing {
    color: var(--text-muted);
    font-style: italic;
}

/* --- Cocktailindex inloggat: datum och mixolog i raden ----------------------------- */

.list--club {
    grid-template-columns: minmax(0, 1fr);
}

.list--club .list__item {
    flex-wrap: wrap;
}

.list--club .list__name {
    flex: 1 1 12rem;
}

/* Cellerna i den inloggade raden. Vid mobilbredd står de på rad med flex-wrap; från
 * 48rem blir de kolumner i rutnätet nedan. */
.list__cell {
    display: block;
    min-width: 0;
}

.list__date,
.list__by {
    color: var(--text-muted);
    font-size: var(--size-small);
    text-decoration: none;
    white-space: nowrap;
}

.list__by {
    min-width: 9rem;
    color: var(--text);
}

.list__date:hover,
.list__by:hover {
    color: var(--accent-strong);
}

/* --- Receptsidans metarad: mixolog och kväll --------------------------------------- */

.recipe__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    color: var(--text-muted);
    font-size: var(--size-small);
}

.recipe__meta a {
    color: var(--text);
}

.recipe__meta a:hover {
    color: var(--accent-strong);
}

.recipe__meta-sep {
    color: var(--text-muted);
}

/* Miniatyren bär flera rader text (mockup 6 och 8). Texten ligger i en egen overlay i
 * stället för direkt i .thumb: .thumb är position: relative med overflow: hidden, så allt
 * som inte är absolut placerat hamnar uppe i vänstra hörnet ovanpå fotot. */
.thumb__caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: var(--space-5) var(--space-3) var(--space-2);
    background-image: linear-gradient(
        to top,
        var(--scrim-solid) 0%,
        var(--scrim-soft) 55%,
        var(--scrim-clear) 100%
    );
}

/* Namnet har sin egen slöja när det står ensamt i .thumb. Inuti en caption bär overlayn
 * den i stället, och namnet blir en rad bland flera. */
.thumb__caption .thumb__name {
    position: static;
    display: block;
    padding: 0;
    background-image: none;
}

.thumb__spirit,
.thumb__by {
    display: block;
    color: var(--text-muted);
    font-size: var(--size-label);
}

.thumb__by {
    color: var(--accent);
}

/* --- Tillfällesarkivet: expanderbara rader ----------------------------------------- */

.tasting-rows {
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.tasting-row {
    border-bottom: 1px solid var(--line);
}

.tasting-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    cursor: pointer;
    list-style: none;
}

/* Webkit ritar en egen triangel i ::-webkit-details-marker. Den tas bort så att raden
 * ser likadan ut i alla webbläsare; öppet/stängt syns på pilen längst till höger. */
.tasting-row__head::-webkit-details-marker {
    display: none;
}

.tasting-row[open] .tasting-row__head {
    background-color: var(--surface-raised);
}

.tasting-row__date {
    font-family: var(--font-display);
    font-size: var(--size-h2);
    font-weight: var(--weight-display);
    color: var(--text-strong);
}

.tasting-row__counts {
    display: flex;
    gap: var(--space-4);
    color: var(--text-muted);
    font-size: var(--size-small);
}

.tasting-row__counts::after {
    content: "\25BE";
    color: var(--accent);
}

.tasting-row[open] .tasting-row__counts::after {
    content: "\25B4";
}

.tasting-row__body {
    padding: 0 var(--space-3) var(--space-4);
    background-color: var(--surface-raised);
}

/* --- Föregående/nästa tillfälle ---------------------------------------------------- */

.pager {
    display: flex;
    justify-content: center;
    gap: var(--space-5);
    margin: var(--space-7) 0 var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.pager__link {
    color: var(--accent);
    font-family: var(--font-display);
    text-decoration: none;
}

.pager__link:hover {
    color: var(--accent-strong);
}

@media (min-width: 48rem) {
    .served-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Tidigare tillfällen står som en smal spalt vid sidan av kvällens kort (mockup 5). */
    .tasting-latest__body {
        grid-template-columns: minmax(0, 1fr) 16rem;
        gap: var(--space-6);
    }

    .previous {
        padding-top: 0;
        padding-left: var(--space-5);
        border-top: 0;
        border-left: 1px solid var(--line);
    }

    /* Raderna blir en tabell först när det finns bredd för fyra kolumner. Mockup 9 har
     * Cocktail, Spirit, Tasting Date och Mixologist i linje; vid mobilbredd bryter samma
     * rad i stället ned sig med flex-wrap ovan. */
    .list--club .list__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 7rem 7rem 10rem;
        align-items: center;
    }

    .tasting-row__head {
        padding-inline: var(--space-5);
    }

    .tasting-row__body {
        padding-inline: var(--space-5);
    }
}

@media (min-width: 64rem) {
    .served-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- Medlemskort (mockup 11) ------------------------------------------------------ */
/* Ett kort per nuvarande medlem: bricka med initialer, namn, två siffror och en lista
 * kväll för kväll, nyast först. Listorna är olika långa, så korten får sin egen höjd
 * (align-items: start) i stället för att sträckas till radens längsta. */

.member-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    align-items: start;
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background-color: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}

.avatar--card {
    width: 3rem;
    height: 3rem;
    margin-left: 0;
    font-size: var(--size-body);
}

.member__name {
    margin: 0;
    font-size: var(--size-h2);
}

.member__name a {
    color: var(--text-strong);
    text-decoration: none;
}

.member__name a:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.member__counts {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--size-small);
}

.member__history {
    width: 100%;
    margin: var(--space-3) 0 0;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--line-strong);
    list-style: none;
    text-align: left;
}

.member__night + .member__night {
    margin-top: var(--space-2);
}

.member__date {
    color: var(--text-muted);
    font-size: var(--size-small);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.member__date:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

.member__drinks {
    margin: 0;
    padding: 0 0 0 var(--space-4);
    list-style: none;
}

.member__drink {
    font-family: var(--font-display);
    line-height: var(--leading-tight);
}

a.member__drink {
    color: var(--accent);
    text-decoration: none;
}

a.member__drink:hover {
    color: var(--accent-strong);
    text-decoration: underline;
}

/* Drinken finns men receptet saknas: samma namn, dämpad färg, ingen länk. */
.member__drink--norecipe {
    color: var(--accent-dim);
}

.member__none {
    margin: 0;
    padding-left: var(--space-4);
    color: var(--text-muted);
    font-size: var(--size-small);
    font-style: italic;
}

/* --- Galleri: foton & videos (mockup 7 och 12) ------------------------------------ */

.search--filters {
    margin-bottom: var(--space-5);
}

.gallery__date {
    margin: 0 0 var(--space-3);
    font-size: var(--size-h2);
}

.gallery__date a {
    color: var(--accent);
    text-decoration: none;
}

.gallery__date a:hover {
    text-decoration: underline;
}

.gallery {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.shot {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--ratio-thumb);
    background-color: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.shot:hover {
    border-color: var(--accent-dim);
}

.shot__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Play-brickan ligger över videorutan. Videon spelas inte här — rutan länkar till filen,
 * som är den enda vägen förbi sessionskontrollen. */
.shot__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    transform: translate(-50%, -50%);
    border-radius: var(--radius-pill);
    background-color: var(--accent);
    color: var(--text-on-accent);
    font-size: var(--size-body);
    line-height: 1;
}

.gallery__more {
    margin-top: var(--space-6);
    text-align: center;
}

@media (min-width: 48rem) {
    .member-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 64rem) {
    .member-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .gallery {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* --- Loggen (steg 12) --------------------------------------------------------------- */
/* Raderna återanvänder .list--club: samma rutnät som cocktailindexets inloggade rader.
 * Bara tre saker saknas i temat och läggs till här — kolumnbredderna för fem fält, en
 * varningsrad för tystnad, och den fällbara diagnostiken. */

.list--log {
    font-size: var(--size-small);
}

.list--log .list__item {
    gap: var(--space-2);
}

/* Tidsstämpeln har fast bredd så kolumnerna står i linje rad för rad. Siffror i
 * proportionellt typsnitt glider annars i sidled och gör loggen svårläst. */
.list--log .list__cell--time {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Rubrikraden markeras bara med färg och en kraftigare linje — ingen egen typografi,
 * så den läses som en del av listan och inte som en tabell ur ett annat tema. */
.list--log .list__item--head {
    color: var(--text-muted);
    border-bottom-color: var(--line-strong);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    font-size: var(--size-label);
}

/* Den valda loggen i typväljaren. Temat har .chip men ingen vald-variant; den ärver
 * chipets form och vänder bara kontrasten. */
.chip--on {
    background-color: var(--accent-strong);
    color: var(--text-on-accent);
}

/* En logg som slutat skriva är hela poängen med vyn att upptäcka, så raden får samma
 * tyngd som innehållet och inte finstilens. */
.log-alert {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--accent-strong);
    background-color: var(--surface-raised);
}

.log-alert__inline {
    color: var(--accent-strong);
}

.log-diag {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    color: var(--text-muted);
}

.log-diag summary {
    font-family: var(--font-display);
    color: var(--accent);
    cursor: pointer;
}

@media (min-width: 48rem) {
    /* Fem kolumner från 48rem, som .list--club gör för sina fyra. Tid får fast bredd,
     * resten delar lika. */
    .list--log .list__item {
        display: grid;
        grid-template-columns: 11rem repeat(4, minmax(0, 1fr));
        align-items: baseline;
    }
}

/* --- Cocktailindex: tumnaglar, matrisvy och direktsökning --------------------------- */

/* Tumnagel framför namnet i listan. Fast bredd så namnen står i linje oavsett om bilden
 * är en riktig cocktailbild eller placeholdern. */
.list__thumb {
    flex: 0 0 auto;
    display: block;
    overflow: hidden;
    width: 4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    line-height: 0;
}

.list__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--ratio-thumb);
    object-fit: cover;
}

.list__item:hover .list__thumb {
    border-color: var(--accent-dim);
}

/* Matrisen är .thumb-grid med fler kolumner. Två på mobil, fyra från 48rem — samma
 * brytpunkt som resten av temat använder. */
.thumb-grid--wide {
    gap: var(--space-4);
}

.thumb-grid--wide .thumb__name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thumb__meta {
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--size-label);
}

/* Vyväxlaren. Två länkar, ingen JS — ?view= i URL:en bär valet, så en delad länk visar
 * samma vy för mottagaren. */
.viewswitch {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.viewswitch__link {
    color: var(--text-muted);
    font-family: var(--font-display);
    font-size: var(--size-small);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
}

.viewswitch__link:hover {
    color: var(--accent);
}

.viewswitch__link--on {
    color: var(--accent-strong);
    border-bottom: 1px solid var(--accent-strong);
}

/* Söker formuläret direkt vid val är knappen överflödig. Klassen sätts av skriptet i
 * mallen, så knappen står kvar för den som inte kör det. */
.search--auto .search__submit {
    display: none;
}

@media (min-width: 48rem) {
    .thumb-grid--wide {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Formulärfel. Stod tidigare som .meta och drunknade i hjälptexten ovanför — ett
 * misslyckat inloggningsförsök gick inte att skilja från vanlig instruktion. */
.formerror {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--accent-strong);
    background-color: var(--surface-raised);
    color: var(--text-strong);
}

/* --- Fotoreferenser (steg 11): originalfoto bredvid genererad bild -------------------- */

.photoref__index {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.photoref__index a {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.photoref__index a:hover {
    color: var(--accent-strong);
    border-color: var(--accent);
}

.photoref__tasting,
.photoref {
    scroll-margin-top: var(--space-4);
}

/* /fotoreferenser#<drink-id> — raden man länkats till. Samma ram markerar medlemmens eget
 * val på röstsidan, så att de två är EN deklaration och inte en kopia. */
.photoref:target,
.vote-card--chosen {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

.photoref {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    background-color: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.photoref--flagged {
    border-color: var(--accent-dim);
}

.photoref__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    grid-column: 1 / -1;
}

.photoref__name {
    margin: 0;
    font-size: var(--size-h2);
}

.photoref__who {
    color: var(--accent);
}

.photoref__badge {
    margin-left: auto;
    padding: 2px var(--space-2);
    color: var(--text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    border-radius: 99px;
}

.photoref__badge--klar {
    color: var(--accent-strong);
    border-color: var(--accent-dim);
}

.photoref__badge--omgor,
.photoref__badge--osaker {
    color: var(--accent);
    border-color: var(--accent);
}

.photoref figure {
    margin: 0;
}

.photoref figcaption {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-size: 0.82rem;
}

.photoref__img {
    display: block;
    width: 100%;
    aspect-ratio: var(--ratio-thumb);
    object-fit: cover;
    background-color: var(--surface-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.photoref__missing {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
    color: var(--text-muted);
    text-align: center;
}

.photoref__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.photoref__facts li {
    padding: 2px var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.photoref__facts b {
    color: var(--text);
    font-weight: 500;
}

.photoref__note {
    grid-column: 1 / -1;
    padding: var(--space-3) var(--space-4);
    color: var(--text);
    background-color: var(--surface-sunken);
    border-left: 3px solid var(--accent);
}

.photoref__note p {
    margin: 0 0 var(--space-2);
}

.photoref__note p:last-child {
    margin-bottom: 0;
}

/* AI:ns granskning av den genererade bilden — skild från motiveringen så att den läses som ett omdöme. */
.photoref__note--review {
    border-left-color: var(--line);
}

.photoref__note-title {
    font-weight: 600;
}

.photoref__note ul {
    margin: 0 0 var(--space-2);
    padding-left: var(--space-4);
}

@media (min-width: 760px) {
    .photoref {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Feedback ("2026-09-24 Feedback.md"): formuläret, listan och ikonen i headern ------ */

/* Ikonlänken i headern. Pratbubblan ritas i currentColor och följer därför .nav__link,
 * :hover och aria-current utan egna färger. */
.nav__link--icon {
    display: inline-flex;
    align-items: center;
}

.nav__icon {
    display: block;
}

.feedback-form {
    margin-top: var(--space-4);
}

/* Fältet lånar sökfältets yta och ram, men är ett block i full bredd och växer nedåt. */
.feedback-form__text {
    display: block;
    width: 100%;
    min-height: 9rem;
    resize: vertical;
    line-height: var(--leading-body);
}

/* Tacket har formulärfelets form men bärnstenens kant, så de två inte kan förväxlas. */
.feedback-thanks {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--accent);
    background-color: var(--surface-raised);
    color: var(--text-strong);
}

.feedback-row__head {
    align-items: center;
}

.feedback-row__meta {
    color: var(--text);
}

/* Pilen som .tasting-row__counts bär. Här finns inga räknare, så den sitter på raden. */
.feedback-row__head::after {
    content: "\25BE";
    margin-left: var(--space-2);
    color: var(--accent);
}

.tasting-row[open] .feedback-row__head::after {
    content: "\25B4";
}

.feedback-row__head .tag {
    margin-left: auto;
}

/* Radbrytningarna står kvar som medlemmen skrev dem. En lång URL bryts hellre än att
 * trycka ut sidan i sidled på mobilen. */
.feedback-row__text {
    padding-top: var(--space-3);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.feedback-row__note {
    margin: var(--space-3) 0 0;
    color: var(--text-muted);
}

/* Bilderna till en post ("2026-09-26 Addera fil till feedback.md"). Fältet och
 * förhandsvisningen i formuläret, miniatyrerna i den utfällda posten. Samma rutnät för båda. */
.feedback-images {
    margin-top: var(--space-4);
}

.feedback-images__label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text);
}

.feedback-images__input {
    max-width: 100%;
    color: var(--text-muted);
}

/* Med JS: webbläsarens fält döljs visuellt men går fortfarande att nå med tangentbord och
 * skärmläsare. Knappen är en <label> för fältet, så ett tryck öppnar samma väljare. */
.feedback-images--enhanced .feedback-images__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.feedback-images--enhanced .feedback-images__input:focus-visible + .feedback-images__pick {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.feedback-images__pick {
    display: inline-block;
    margin-right: var(--space-3);
    cursor: pointer;
}

.feedback-images__pick[hidden],
.feedback-images__count[hidden] {
    display: none;
}

.feedback-images__status:empty {
    display: none;
}

.feedback-images__preview,
.feedback-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.feedback-images__preview:empty {
    display: none;
}

.feedback-images__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.feedback-images__item img,
.feedback-thumbs__img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background-color: var(--surface-sunken);
}

/* Medan bilderna bearbetas och när formuläret skickas. */
.feedback-form .button:disabled {
    opacity: 0.6;
    cursor: progress;
}

.feedback-thumbs__link:hover .feedback-thumbs__img,
.feedback-thumbs__link:focus-visible .feedback-thumbs__img {
    border-color: var(--accent);
}

/* Statusetiketterna. New syns tydligast: fylld bärnsten. Pågående och klart i bärnsten
 * utan fyllning, avslutade i dämpad grå. */
.tag--new {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

.tag--received {
    border-color: var(--line-strong);
    color: var(--text);
}

.tag--progress {
    border-color: var(--accent);
    color: var(--accent-strong);
}

.tag--done {
    border-color: var(--accent-dim);
    color: var(--accent-strong);
}

.tag--later,
.tag--closed {
    border-color: var(--line);
    color: var(--text-muted);
}

/* Logotypomröstningen (röstsidan). Prefixet är vote-, aldrig logo-: .logo är sidhuvudets ordmärke.
 * Två kolumner på mobil, där en logotyp annars blir 80 px bred; fyra från 48rem (4 × 3). */
.vote-total {
    margin: var(--space-4) 0;
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-strong);
}

.vote-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (min-width: 48rem) {
    .vote-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Kortet och förstoringsglaset ligger bredvid varandra i en cell; glaset läggs över kortets
 * övre högra hörn. */
.vote-cell {
    position: relative;
    display: flex;
}

.vote-cell__zoom {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background-color: var(--surface-deep);
    color: var(--text-strong);
    opacity: 0.85;
}

.vote-cell__zoom:hover {
    border-color: var(--accent);
    color: var(--accent-strong);
    opacity: 1;
}

.vote-cell__zoom:focus-visible {
    outline: var(--focus-ring);
    opacity: 1;
}

.vote-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-2);
    background-color: var(--surface-raised);
    /* Bara bredd och stil: kortformen border hade nollställt färgen från den delade ramregeln. */
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    scroll-margin-top: var(--space-4);
}

/* Grundramen bara på de ovalda: den delade ramregeln ovan står tidigare i filen och hade
 * annars skrivits över. */
.vote-card:not(.vote-card--chosen) {
    border-color: var(--line);
}

.vote-card:not(.vote-card--chosen):hover {
    border-color: var(--line-strong);
}

.vote-card:focus-visible {
    outline: var(--focus-ring);
}

.vote-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

.vote-card__missing {
    display: grid;
    place-items: center;
    color: var(--text-muted);
}

.vote-card__label {
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-strong);
}

.vote-card__count {
    color: var(--accent-strong);
}

.vote-withdraw {
    margin-top: var(--space-4);
}

/* Förstoringen: ett lager över hela sidan, synligt bara när adressen slutar på #zNN. */
.vote-zoom {
    display: none;
}

.vote-zoom:target {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: var(--space-4);
}

.vote-zoom__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgb(23 18 15 / 0.92);
    cursor: zoom-out;
}

.vote-zoom__figure {
    position: relative;
    margin: 0;
    max-width: min(90vw, calc(90vh - 3rem), 1024px);
}

.vote-zoom__img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}

.vote-zoom__caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
    font-family: var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-strong);
}

.vote-zoom__close {
    color: var(--accent-strong);
}