/* Planera → Måltider och Kokboken (MealsSection, MealDayView, CookbookView, RecipeView). */

/* ---------- Veckan ---------- */

.meals .stack {
    gap: 0;
}

/* Veckans rubrik har knappar och rubriken bredvid har inga: samma höjd, så att korten börjar på samma rad. */
.meals .period-header {
    min-height: 52px;
}

.meals-hint {
    padding: 0 4px 10px;
    font: var(--subheadline);
    color: var(--backdrop-secondary);
}

.meals .premium-card {
    margin-bottom: 12px;
}

.week-card {
    transition: opacity 0.15s;
}

.week-card.stale {
    opacity: 0.45;
}

.meal-day-row {
    padding: 12px 0;
    text-align: left;
}

.meal-day-row .date {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 40px;
}

.meal-day-row .weekday {
    font: var(--caption);
    font-weight: 600;
}

.meal-day-row .number {
    font: var(--title3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.meal-day-row.today .date {
    color: var(--accent);
}

.meal-day-row .grow {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.meal-day-row .title {
    font: var(--callout);
    font-weight: 600;
}

.meal-day-row .unplanned {
    font: var(--callout);
    color: var(--secondary);
}

.meal-day-row .cook,
.meal-readonly .cook {
    display: flex;
    align-items: center;
    gap: 6px;
    font: var(--footnote);
    color: var(--secondary);
}

.meal-day-row .poll-open {
    display: flex;
    align-items: center;
    gap: 5px;
    font: var(--caption);
    font-weight: 600;
    color: var(--accent);
}

.meal-day-row .poll-open .icon {
    font-size: 12px;
    stroke-width: 3;
}

.meals .button.secondary {
    margin-top: 12px;
}

.cookbook-top {
    padding-bottom: 12px;
}

.cookbook-bottom {
    padding-top: 24px;
}

/* ---------- Ingredienser: veckans, receptets, dagens ---------- */

.ingredient-row {
    min-height: 0;
    padding: 11px 0;
    gap: 8px;
    font: var(--callout);
}

.ingredient-row .grow {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-wrap: anywhere;
}

.ingredient-row .staple {
    display: inline-flex;
    font-size: 13px;
    color: var(--secondary);
}

.quantity {
    flex: none;
    max-width: 55%;
    text-align: right;
    font-weight: 600;
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.more-row {
    min-height: 0;
    padding: 11px 0;
    font: var(--footnote);
    color: var(--secondary);
}

/* ---------- Raden till Kokboken och listan med recept ---------- */

.cookbook-row {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    color: inherit;
    text-decoration: none;
    transition: transform 0.12s var(--ease);
}

.cookbook-row:hover {
    text-decoration: none;
}

.cookbook-row:active {
    transform: scale(0.99);
}

.cookbook-row .grow,
.recipe-row .grow {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}

.cookbook-row .title,
.recipe-row .title {
    font: var(--callout);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cookbook-row .detail,
.recipe-row .detail {
    font: var(--footnote);
    color: var(--secondary);
}

.cookbook {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
}

.sheet-body .cookbook {
    padding-top: 0;
}

.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--control-radius);
    background: var(--card);
    border: 1px solid var(--card-border);
    -webkit-backdrop-filter: var(--card-blur);
    backdrop-filter: var(--card-blur);
    color: var(--secondary);
    cursor: text;
}

.search-field:focus-within {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
}

.search-field input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.recipe-row {
    min-height: 50px;
    padding: 12px 0;
}

.recipe-row .has-recipe {
    display: inline-flex;
    font-size: 14px;
    color: var(--secondary);
}

.recipe-row.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- Bilden på receptet ---------- */

.recipe-image {
    overflow: hidden;
    background: var(--quiet);
}

.recipe-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recipe-image.thumbnail {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.recipe-image.hero {
    height: 240px;
    margin-top: 8px;
    border-radius: var(--card-radius);
}

.recipe-image.editor {
    height: 180px;
    border-radius: var(--card-radius);
}

/* ---------- Receptet ---------- */

.recipe-title {
    padding: 8px 0 16px;
}

.recipe {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recipe-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recipe-section > .section-header {
    padding-top: 4px;
    padding-bottom: 0;
}

.group-heading {
    padding: 6px 4px 0;
    font: var(--subheadline);
    font-weight: 700;
}

.step-row {
    align-items: baseline;
    min-height: 0;
    padding: 12px 0;
    font: var(--callout);
}

.step-row .number,
.step-input .number {
    flex: none;
    min-width: 24px;
    text-align: right;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.step-row .grow {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.recipe-note {
    padding: 12px 0;
    font: var(--callout);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.recipe-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding-left: 4px;
    font: var(--subheadline);
    font-weight: 600;
    color: var(--backdrop-accent);
}

dialog .recipe-link {
    color: var(--accent);
}

.archived-row {
    font: var(--subheadline);
}

.recipe-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 24px;
}

/* Receptet i dagens ark: samma innehåll, på arkets botten. */
.recipe-in-sheet .recipe-title h1 {
    font: var(--title);
}

.recipe-in-sheet .recipe-image.hero {
    height: 200px;
}

/* ---------- Portioner ---------- */

.servings-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.servings-card .grow {
    flex: 1;
    min-width: 0;
}

.servings-card .title {
    font: var(--callout);
    font-weight: 600;
}

.servings-card .detail {
    font: var(--footnote);
    color: var(--secondary);
}

.stepper.servings button {
    width: 44px;
    height: 44px;
    font-size: 17px;
}

.stepper.servings button .icon {
    stroke-width: 3;
}

.stepper.servings output {
    min-width: 28px;
}

/* Portioner i receptets formulär: ett fält med minus, antal och plus. */
.stepper-field {
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
}

.stepper-field button {
    height: 44px;
}

.stepper-field output {
    font: var(--body);
    font-weight: 600;
    color: var(--label);
}

/* ---------- Dagens middag ---------- */

.meal-day .suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meal-day .suggestions:empty {
    display: none;
}

.poll-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.poll-slot .footnote {
    padding: 0 4px;
}

.meal-day .suggestions .field-label {
    padding: 4px 4px 0;
    font: var(--caption);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--secondary);
}


.meal-day .suggestions .chip {
    min-height: 40px;
    padding: 0 16px;
}

textarea.input.short {
    min-height: 46px;
    padding-top: 11px;
    padding-bottom: 11px;
    resize: none;
    overflow: hidden;
}

.meal-readonly {
    gap: 8px;
}

.meal-readonly h3 {
    font: var(--title3);
    font-weight: 700;
}

.meal-readonly .note {
    font: var(--subheadline);
    white-space: pre-wrap;
}

.meal-readonly .secondary {
    font: var(--subheadline);
}

.meal-readonly .ingredients {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
    font: var(--subheadline);
}

.meal-readonly .line {
    display: flex;
    gap: 12px;
}

.meal-readonly .line .grow {
    flex: 1;
    min-width: 0;
}

.meal-readonly .quantity {
    font-weight: 400;
}

/* ---------- Ingredienser och steg som går att ändra ---------- */

.heading-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 4px;
}

.heading-input {
    font: var(--subheadline);
    font-weight: 700;
}

.ingredient-input,
.step-input {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 10px 0 16px;
    border-radius: var(--control-radius);
    background: var(--card);
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.05);
}

.ingredient-input:focus-within,
.step-input:focus-within {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
}

.ingredient-input .amount {
    flex: none;
    width: 90px;
    text-align: right;
    color: var(--secondary);
}

.step-input {
    align-items: baseline;
    padding-top: 12px;
    padding-bottom: 12px;
}

.step-area {
    resize: none;
    overflow: hidden;
    line-height: 1.35;
    font: var(--callout);
}

.remove-dot {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tertiary);
    color: var(--card);
    font-size: 11px;
}

.remove-dot .icon {
    stroke-width: 3.6;
}

.remove-dot:hover {
    background: var(--secondary);
}

.step-input .remove-dot {
    align-self: center;
}

.staple-toggle {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 44px;
    font-size: 17px;
    color: var(--tertiary);
}

.staple-toggle[aria-checked="true"] {
    color: var(--accent);
}

.staple-toggle[aria-checked="true"] .icon {
    fill: color-mix(in srgb, var(--accent) 22%, transparent);
}

.paste-area {
    min-height: 180px;
    font: var(--callout);
}

.uploading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 4px;
}

/* ---------- Välja: varor till inköpslistan, dag att planera in ---------- */

.pick-row {
    min-height: 46px;
    padding: 6px 0;
    font: var(--subheadline);
    text-align: left;
}

.pick-row .grow.strong {
    font-weight: 600;
}

.pick-row .check {
    --size: 24px;
}

.day-pick {
    min-height: 48px;
    font: var(--callout);
}

.day-pick .quantity {
    font: var(--footnote);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-label.positive,
.card-label.positive .icon {
    color: var(--positive-text);
}

.card > .card-label {
    padding: 16px 0;
}