/* ITPlugg v19.34 – runda 3: begreppslexikonets visuella hierarki.
   Additivt CSS-lager. Ingen befintlig regel i huvudstilmallen skrivs
   över – bara nya, tydligt namngivna klasser och attributselektorer på
   data-attribut som renderLex redan sätter. */

/* ===== 1. Tydligare titelvikt på begreppskort ===== */
.lex-card h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em;margin:0 0 7px}

/* ===== 2. Kort som redan visats får en diskret markering =====
   Använder attributet renderLex redan sätter (data-revealed) – ingen
   ny logik, bara en visuell signal om vad eleven redan tittat på. */
.lex-card{border-left:3px solid transparent;transition:border-color var(--v19x-transition-base,200ms ease),box-shadow var(--v19x-transition-base,200ms ease),transform 150ms ease}
.lex-card[data-revealed="1"]{border-left-color:color-mix(in srgb,var(--teal) 45%,var(--line))}
.lex-card:hover{box-shadow:var(--v19x-shadow-sm,0 1px 3px rgba(0,0,0,.1));transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce),(prefers-reduced-motion){.lex-card{transition:none}.lex-card:hover{transform:none}}

/* ===== 3. Bokmärkta kort syns tydligt i rutnätet ===== */
.lex-card.v1934-bookmarked{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 5%,var(--bg2))}

/* ===== 4. Anteckningsfältet: tystare i vila, tydligt vid fokus ===== */
.note-area{border-color:color-mix(in srgb,var(--line) 70%,transparent);opacity:.85;transition:opacity 150ms ease,border-color 150ms ease}
.note-area:focus,.note-area:not(:placeholder-shown){opacity:1}
.note-area:focus{border-color:var(--teal)}

/* ===== 5. Sök- och lägesknapparna: tydligare gruppering ===== */
.lex-controls{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.lex-controls .btn[aria-pressed="true"]{border-color:var(--teal);color:var(--teal)}

@media(max-width:640px){
  .lex-card h3{font-size:15.5px}
}