/* ┌─────────────────────────────────────────────────────────────────────────────┐
   │  stillaering.css — stillæringens to flader i MCP-kolonnen                   │
   │                                                                             │
   │  Flyttet hertil fra app.css (15/8) sammen med ombygningen fra "kortet       │
   │  lander selv" til "kortet ligger bag en knap":                              │
   │                                                                             │
   │    ⓪ .stil-chip        indgangen i kolonnen — svajer tre gange og tier      │
   │    ① .stil-kort        popoveren ud til højre, forankret på knappen         │
   │    ② .stil-regel-*     Min stil-fanen i indstillinger                       │
   │                                                                             │
   │  Design: docs/design/stillaering-ui-mockup.html.                            │
   │  Kortets eget udtryk (radius, kant, gradient, skygge) er uændret fra        │
   │  app.css — kun forankringen og indgangen er ny.                             │
   └─────────────────────────────────────────────────────────────────────────────┘ */

/* ─── ⓪ Indgangen: "Vi har bemærket…"-knappen ─────────────────────────────────
   Geometrien er kolonnens egen (.dag-chip i dagens-notater.css: fuld bredde,
   11 px radius, › yderst), så de to indgange står som søskende. Farven er
   ✦ Lært-chippens apricot, ikke kolonnens blå: de blå chips er journalen,
   den her er lægens egne rettelser, og de to må ikke forveksles med et blik. */

.stil-chip-vaert {
    position: relative;
}

.stil-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    border: 1px solid rgba(217, 139, 82, .5);
    background: rgba(251, 238, 226, .8);
    border-radius: 11px;
    padding: 8px 12px;
    margin-top: 7px;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: #8a5a2b;
    cursor: pointer;
    text-align: left;
    /* Tre svaj, så falder den til ro. En knap, der bliver ved med at vinke,
       er en notifikation, der tigger — og hele forslagsmotoren er bygget på
       "aldrig nagging". */
    animation: stil-chip-ind .3s ease-out,
               stil-chip-svaj 1.7s ease-in-out .3s 3;
}

.stil-chip:hover {
    background: rgba(253, 243, 233, .95);
    border-color: rgba(217, 139, 82, .75);
}

/* Åben tilstand: knappen bliver hvid, så det er tydeligt, hvad kortet hører til. */
.stil-chip.er-aaben {
    background: #fff;
    border-color: rgba(217, 139, 82, .85);
    animation: none;
}

.stil-chip-prik {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d98b52;
    flex: none;
}

.stil-chip-pil {
    margin-left: auto;
    color: #c39064;
    font-weight: 400;
}

@keyframes stil-chip-ind {
    from { opacity: 0; transform: translateY(-6px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

/* Blød vippen om knappens egen midte — naboerne flytter sig ikke. Udslaget er
   lille (0,6°), fordi elementet er bredt: samme vinkel, der er diskret på en
   lille pille, bliver et vejrhane-udsving på en fuld kolonnebredde. */
@keyframes stil-chip-svaj {
      0% { transform: none; box-shadow: 0 0 0 0 rgba(217, 139, 82, .4); }
     25% { transform: rotate(-.6deg) scale(1.014); }
     50% { transform: rotate(.6deg) scale(1.014); box-shadow: 0 0 0 8px rgba(217, 139, 82, 0); }
     75% { transform: rotate(-.3deg) scale(1.006); }
    100% { transform: none; box-shadow: 0 0 0 0 rgba(217, 139, 82, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .stil-chip { animation: none; }
}

/* ─── ① Kortet: "Vi har bemærket din skrivestil" ──────────────────────────────
   Var fixed i skærmens højre hjørne (app.css 6/8). Er nu forankret PÅ knappen
   og folder ud til HØJRE: kolonnen er for smal til 420 px, og en udfoldning
   nedad ville skubbe Spørg journalen ud af syne — det felt skal ligge stille.
   +30 px, så kortet er fri af panelets egen kant og runding. */

.stil-kort {
    position: absolute;
    top: -10px;
    left: calc(100% + 30px);
    width: min(420px, calc(100vw - 32px));
    z-index: 95;
    text-align: left;
    border-radius: 16px;
    border: 1px solid rgba(47, 108, 143, .22);
    background: linear-gradient(180deg, rgba(249, 253, 255, .98), rgba(237, 244, 251, .98));
    box-shadow: 0 16px 44px rgba(17, 31, 41, .2);
    padding: 16px 18px 14px;
    animation: stil-kort-ind .28s ease-out;
}

/* Pil ind mod knappen — kortet skal se ud som knappens indhold, ikke som
   endnu et vindue, der er landet ved siden af. */
.stil-kort::before {
    content: '';
    position: absolute;
    top: 22px;
    left: -6.5px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-radius: 2px;
    background: rgba(249, 253, 255, .98);
    border-left: 1px solid rgba(47, 108, 143, .22);
    border-bottom: 1px solid rgba(47, 108, 143, .22);
}

@keyframes stil-kort-ind {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .stil-kort { animation: none; }
}

.stil-kort-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.stil-kort-titel { font-weight: 600; font-size: 14.5px; color: #23425c; }

.stil-kort-luk {
    border: none;
    background: none;
    color: #90a2b4;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.stil-kort-luk:hover { background: rgba(21, 50, 74, .07); color: #4a5f74; }

.stil-kort-intro,
.stil-kort-fod {
    font-size: 12.5px;
    color: #6a7d90;
    line-height: 1.5;
    margin: 0 0 12px;
}

.stil-kort-fod {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(21, 50, 74, .1);
}

.stil-forslag {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(21, 50, 74, .1);
    border-radius: 11px;
    padding: 11px 13px;
    margin-bottom: 9px;
}

.stil-forslag-tekst { font-size: 13.5px; color: #23425c; font-weight: 550; }

.stil-forslag-meta {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #8b9cad;
    margin-top: 3px;
}

.stil-forslag-knapper {
    display: flex;
    justify-content: flex-end;   /* husets regel: sekundaer venstre, primaer yderst hoejre */
    gap: 8px;
    margin-top: 9px;
}

.stil-btn {
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    cursor: pointer;
    border: 1px solid rgba(21, 50, 74, .12);
    background: #fff;
    color: #46596c;
}
.stil-btn:hover { background: #f4f8fb; }

.stil-btn-ja {
    background: linear-gradient(180deg, #3b7fcb, #2f6aad);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
}
.stil-btn-ja:hover { background: linear-gradient(180deg, #4189d6, #3574b8); }

/* ─── ② Min stil-fanen i indstillinger ────────────────────────────────────── */

.stil-regel-linje {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    background: rgba(214, 232, 243, .35);
    margin-bottom: 7px;
}

.stil-regel-fjern {
    border: none;
    background: none;
    color: #90a2b4;
    font-size: 15px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.stil-regel-fjern:hover { background: rgba(21, 50, 74, .08); color: #c0564d; }

.stil-tom {
    font-size: 13px;
    color: #7a8a9a;
    line-height: 1.55;
}

/* Testpanel i Min stil — kun mens funktionen udvikles (6/8). */
.stil-testpanel {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px dashed rgba(21, 50, 74, .18);
}

.stil-testpanel-titel {
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b9cad;
    margin-bottom: 6px;
}

.stil-testpanel-knapper {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.stil-teststatus {
    margin-top: 10px;
    font-size: 12.5px;
    color: #2f6aad;
    background: rgba(214, 232, 243, .45);
    border-radius: 8px;
    padding: 7px 10px;
}

/* ── Forslag vist som lægens egen sætning (klasse 3) ──────────────────────────
   Klassen pooles på vanen, så et abstrakt spørgsmål skiller sig ud fra de
   konkrete ordforslag og er sværere at svare på. Citatet gør det konkret;
   omfangslinjen holder det ærligt. */

.stil-forslag-label {
    font-size: .76rem;
    color: #7b8b9b;
    margin-bottom: 3px;
}

.stil-forslag-citat {
    font-size: .89rem;
    line-height: 1.5;
    color: #3d5064;
    background: rgba(21, 50, 74, .035);
    border-radius: 8px;
    padding: 9px 12px;
    margin-bottom: 7px;
}

.stil-forslag-fjernet {
    background: rgba(214, 90, 80, .15);
    color: #9c3a32;
    padding: 0 3px;
    border-radius: 3px;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.stil-forslag-omfang {
    font-size: .82rem;
    color: #56697d;
    margin-bottom: 8px;
}

/* ── Forslagskortet: redigerbar til-side + rækkevidde-dropdown (3/9) ──────── */
.stil-forslag-input {
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: #23425c;
    border: 0;
    border-bottom: 1.5px solid rgba(59, 127, 203, .45);
    background: transparent;
    padding: 0 2px;
    margin: 0 2px;
    min-width: 3ch;
}
.stil-forslag-input:focus { outline: none; border-bottom-color: #3b7fcb; background: #f4f8fb; }

/* Rækkevidde-vælgeren som en blød pille med egen chevron — den native select
   så klodset ud i meta-linjen (Morten 4/9). */
.stil-forslag-select {
    appearance: none;
    -webkit-appearance: none;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #23425c;
    border: 1px solid rgba(59, 127, 203, .35);
    border-radius: 999px;
    background: #f4f8fb url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%233b7fcb' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 9px center;
    padding: 3px 26px 3px 11px;
    margin-left: 2px;
    vertical-align: middle;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}
.stil-forslag-select:hover { border-color: #3b7fcb; background-color: #eaf2fb; }
.stil-forslag-select:focus-visible { outline: 2px solid rgba(59, 127, 203, .45); outline-offset: 1px; }

/* ── Kortlivede ✦-beskeder i MCP-kolonnen (3/9) ───────────────────────────
   "Gemt: …" som ét blik: toner ind, står få sekunder, toner ud — værten
   fjerner beskeden efter samme tid (MF_SektionsOrdrer.BeskedVisning). */
.stil-beskeder { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 6px; }

.stil-besked {
    text-align: left;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #8a5a2b;
    cursor: pointer;
    border: 1px solid rgba(217, 139, 82, .4);
    background: rgba(251, 238, 226, .75);
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: stil-besked-liv 6s ease-in-out forwards;
}
.stil-besked.er-fjernet { color: #5c6b7a; border-color: rgba(120, 134, 150, .35); background: rgba(236, 240, 245, .7); }

@keyframes stil-besked-liv {
    0%   { opacity: 0; transform: translateY(-3px); }
    8%   { opacity: 1; transform: none; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .stil-besked { animation: none; } }

/* ── Kolonnens Min stil-ansigt (4/9) ─────────────────────────────────────── */
.stil-ansigt .dag-hoved { margin-bottom: 10px; }
.stil-ansigt-regler { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
.stil-ansigt .stil-tom { margin: 4px 2px; }

/* Listepunkt for slider-regler: afsnit fed + "Længde: Udførlig" dæmpet (4/9) */
.stil-regel-detalje { color: #6a7d90; font-weight: 500; }

/* Luft mellem det nye (bjælken) og det accepterede (Morten 4/9) */
.stil-ansigt-fold {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    border: 0;
    background: none;
    padding: 4px 2px;
    margin: 4px 0 6px;
    font: inherit;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b9cad;
    cursor: pointer;
    text-align: left;
}
.stil-ansigt-fold:hover { color: #46596c; }
.stil-ansigt-fold.efter-bjaelke { margin-top: 22px; }
.stil-ansigt-fold-pil { width: 10px; font-size: 12px; }
.stil-ansigt-fold-tal { font-variant-numeric: tabular-nums; opacity: .85; }