/*
 * Matsnakk.no – fase 3A
 * Opprett/rediger-oppskrift layoutgrunnmur.
 * Ren CSS/layoutpakke: ingen database, ingen lagringslogikk, ingen rettighetsendringer.
 */

:root {
    --mn-p3a-cream: #fff8ed;
    --mn-p3a-paper: rgba(255,255,255,.92);
    --mn-p3a-ink: #221713;
    --mn-p3a-muted: #66584d;
    --mn-p3a-green: #075642;
    --mn-p3a-green-2: #0d6b53;
    --mn-p3a-copper: #a8663a;
    --mn-p3a-gold: #e0bd66;
    --mn-p3a-border: rgba(83, 55, 35, .16);
    --mn-p3a-shadow: 0 18px 44px rgba(40, 27, 18, .10);
    --mn-p3a-radius-lg: 24px;
    --mn-p3a-radius-md: 16px;
    --mn-p3a-radius-sm: 11px;
}

/* Hovedskall for opprett/rediger */
.mn-recipe-editor {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(1.2rem, 2.6vw, 2rem);
    color: var(--mn-p3a-ink);
}

.mn-recipe-editor__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 320px);
    gap: clamp(1rem, 2vw, 1.4rem);
    align-items: stretch;
    margin: 0 0 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--mn-p3a-radius-lg);
    background:
        radial-gradient(circle at 85% 8%, rgba(224,189,102,.18), transparent 18rem),
        linear-gradient(135deg, #fffaf1, #f4eadb);
    border: 1px solid var(--mn-p3a-border);
    box-shadow: var(--mn-p3a-shadow);
}

.mn-recipe-editor__hero h1 {
    margin: .1rem 0 .6rem;
    color: var(--mn-p3a-ink);
    font-size: clamp(2.1rem, 5vw, 4.1rem);
    line-height: .96;
    letter-spacing: -.045em;
}

.mn-recipe-editor__hero p {
    max-width: 72ch;
    color: var(--mn-p3a-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

.mn-recipe-editor__hero aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
    padding: 1rem;
    border-radius: var(--mn-p3a-radius-md);
    background: linear-gradient(135deg, rgba(7,86,66,.10), rgba(224,189,102,.16));
    border: 1px solid rgba(7,86,66,.15);
}

.mn-recipe-editor__hero aside strong {
    color: var(--mn-p3a-green);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mn-recipe-editor__hero aside span,
.mn-recipe-editor__hero aside small {
    color: var(--mn-p3a-muted);
}

.mn-recipe-editor__kicker {
    margin: 0 0 .35rem;
    color: var(--mn-p3a-copper) !important;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* Meldinger/status */
.mn-recipe-editor__notice {
    margin: 0 0 1.1rem;
    padding: 1rem 1.15rem;
    border-radius: var(--mn-p3a-radius-md);
    background: #e8f4ee;
    border: 1px solid rgba(7,86,66,.18);
    color: #174e3f;
    box-shadow: 0 10px 26px rgba(7,86,66,.07);
}

.mn-recipe-editor__notice a {
    color: var(--mn-p3a-green);
    font-weight: 800;
}

/* Form og paneler */
.mn-recipe-editor__form {
    display: grid;
    gap: 1.15rem;
}

.mn-recipe-editor__panel,
.mn-recipe-editor__side-panel,
.mn-recipe-editor fieldset,
.mn-recipe-editor .mn-form-section {
    padding: clamp(1.1rem, 2.2vw, 1.55rem);
    border-radius: var(--mn-p3a-radius-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,248,237,.94));
    border: 1px solid var(--mn-p3a-border);
    box-shadow: var(--mn-p3a-shadow);
}

.mn-recipe-editor__panel > h2,
.mn-recipe-editor__section-head h2 {
    margin: 0 0 .35rem;
    color: var(--mn-p3a-ink);
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    letter-spacing: -.025em;
}

.mn-recipe-editor__section-head {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.mn-recipe-editor__section-head p {
    color: var(--mn-p3a-muted);
    line-height: 1.55;
}

.mn-recipe-editor__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .95rem;
}

.mn-recipe-editor__wide {
    grid-column: 1 / -1;
}

.mn-recipe-editor label {
    display: flex;
    flex-direction: column;
    gap: .38rem;
    min-width: 0;
}

.mn-recipe-editor label > span,
.mn-recipe-editor__step > span {
    color: #3e2a1f;
    font-weight: 850;
    font-size: .92rem;
}

.mn-recipe-editor input[type="text"],
.mn-recipe-editor input[type="number"],
.mn-recipe-editor input[type="email"],
.mn-recipe-editor input[type="url"],
.mn-recipe-editor select,
.mn-recipe-editor textarea {
    width: 100%;
    border: 1px solid rgba(88, 61, 40, .22) !important;
    border-radius: var(--mn-p3a-radius-sm) !important;
    background: rgba(255,255,255,.94) !important;
    color: var(--mn-p3a-ink) !important;
    padding: .78rem .86rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.mn-recipe-editor textarea {
    line-height: 1.55;
    resize: vertical;
}

.mn-recipe-editor input:focus,
.mn-recipe-editor select:focus,
.mn-recipe-editor textarea:focus {
    border-color: var(--mn-p3a-green) !important;
    box-shadow: 0 0 0 4px rgba(7,86,66,.12) !important;
    outline: none;
}

.mn-recipe-editor input::placeholder,
.mn-recipe-editor textarea::placeholder {
    color: rgba(84,70,59,.58);
}

/* Ingredienslinjer */
.mn-recipe-editor__ingredient-lines,
.mn-recipe-editor__steps,
.mn-recipe-editor__side-suggestions {
    display: grid;
    gap: .9rem;
}

.mn-recipe-editor__ingredient-line {
    display: grid;
    grid-template-columns: 1.1fr .75fr 1.35fr .8fr;
    gap: .85rem;
    align-items: end;
    padding: 1rem;
    border-radius: var(--mn-p3a-radius-md);
    background: rgba(248, 241, 230, .74);
    border: 1px solid rgba(83, 55, 35, .12);
}

.mn-recipe-editor__ingredient-line .mn-recipe-editor__wide {
    grid-column: span 2;
}

.mn-recipe-editor__ingredient-picker {
    position: relative;
}

/* Steg */
.mn-recipe-editor__step {
    padding: 1rem;
    border-radius: var(--mn-p3a-radius-md);
    background: rgba(248, 241, 230, .74);
    border: 1px solid rgba(83, 55, 35, .12);
}

/* Knapper */
.mn-recipe-editor__secondary,
.mn-recipe-editor__remove,
.mn-recipe-editor button,
.mn-recipe-editor__actions button,
.mn-recipe-editor__actions a {
    border-radius: 999px;
    font-weight: 850;
}

.mn-recipe-editor__secondary {
    border: 1px solid rgba(7,86,66,.20) !important;
    background: #e8f4ee !important;
    color: var(--mn-p3a-green) !important;
    padding: .72rem 1rem;
}

.mn-recipe-editor__secondary:hover {
    background: var(--mn-p3a-green) !important;
    color: #fff !important;
}

.mn-recipe-editor__remove {
    border: 1px solid rgba(168,102,58,.25) !important;
    background: rgba(168,102,58,.10) !important;
    color: #8a552e !important;
    padding: .68rem .88rem;
}

.mn-recipe-editor__remove:hover {
    background: #8a552e !important;
    color: #fff !important;
}

.mn-recipe-editor__actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem;
    margin-top: .35rem;
    border: 1px solid rgba(83,55,35,.18);
    border-radius: var(--mn-p3a-radius-lg) var(--mn-p3a-radius-lg) 0 0;
    background: rgba(255, 248, 237, .94);
    backdrop-filter: blur(10px);
    box-shadow: 0 -12px 30px rgba(40,27,18,.08);
}

.mn-recipe-editor__actions button[type="submit"],
.mn-recipe-editor__actions .mn-recipe-editor__primary {
    background: linear-gradient(135deg, var(--mn-p3a-green), var(--mn-p3a-green-2)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    padding: .82rem 1.15rem;
    box-shadow: 0 10px 22px rgba(7,86,66,.18);
}

/* Checkbox */
.mn-recipe-editor__checkbox {
    flex-direction: row !important;
    align-items: center;
    gap: .55rem !important;
    padding: .68rem .78rem;
    border-radius: var(--mn-p3a-radius-sm);
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(83,55,35,.12);
}

.mn-recipe-editor__checkbox input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--mn-p3a-green);
}

/* Tilbehør/suggestion cards */
.mn-recipe-editor__side-suggestion {
    padding: .9rem 1rem;
    border-radius: var(--mn-p3a-radius-md);
    background: #f7f0d9;
    border: 1px solid rgba(224,189,102,.28);
}

.mn-recipe-editor__side-suggestion strong {
    display: block;
    color: #6f5718;
}

.mn-recipe-editor__side-suggestion span {
    color: var(--mn-p3a-muted);
}

.mn-recipe-editor__small-note {
    color: var(--mn-p3a-muted);
    line-height: 1.55;
}

/* Mine utkast / oversiktssider som bruker samme uttrykk */
.mn-member-drafts,
.mn-recipe-drafts,
.mn-controlpanel-recipe-submissions {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(1rem, 2.5vw, 2rem);
}

.mn-member-drafts article,
.mn-recipe-drafts article,
.mn-controlpanel-recipe-submissions article,
.mn-controlpanel-recipe-submissions table {
    border-radius: var(--mn-p3a-radius-lg);
    border: 1px solid var(--mn-p3a-border);
    background: rgba(255,255,255,.92);
    box-shadow: var(--mn-p3a-shadow);
}

/* Fremtidig plass for taksonomi/allergen-felt i fase 3B */
.mn-recipe-editor__taxonomy-placeholder,
.mn-recipe-editor__allergen-placeholder,
.mn-recipe-editor__media-placeholder {
    padding: 1rem;
    border-radius: var(--mn-p3a-radius-md);
    background: linear-gradient(135deg, rgba(7,86,66,.08), rgba(224,189,102,.14));
    border: 1px dashed rgba(7,86,66,.28);
    color: var(--mn-p3a-muted);
}

/* Responsive */
@media (max-width: 1100px) {
    .mn-recipe-editor__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mn-recipe-editor__ingredient-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mn-recipe-editor__ingredient-line .mn-recipe-editor__wide {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .mn-recipe-editor {
        padding: 1rem;
    }

    .mn-recipe-editor__hero {
        grid-template-columns: 1fr;
    }

    .mn-recipe-editor__grid,
    .mn-recipe-editor__ingredient-line {
        grid-template-columns: 1fr;
    }

    .mn-recipe-editor__section-head {
        flex-direction: column;
    }

    .mn-recipe-editor__actions {
        position: static;
        justify-content: stretch;
    }

    .mn-recipe-editor__actions button,
    .mn-recipe-editor__actions a {
        width: 100%;
        justify-content: center;
    }
}