/* Slang Licence (/slang-licence/): the Irish Slang Theory Test. Sits on top of css/slangle.css and css/poshornot.css
   (options, reveal card, Lawrence bubble); only the progress bar, the long answer options, the name form and the card live here. */
.sl-meta { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.4rem; }
.sl-bar { flex: 1; height: 0.6rem; border-radius: 999px; background: var(--paper-edge); overflow: hidden; }
.sl-bar span { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 0.25s; }
.sl-kind { margin: 0 0 0.35rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sl-q { margin: 0; font-family: var(--serif); font-size: 1.06rem; line-height: 1.45; }
.sl-long .po-opt { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.sl-end .po-score { color: #b5452f; }
.sl-end.is-pass .po-score { color: #2f7d4f; }
.sl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.4rem 0 0.7rem; }
.sl-form label { display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); }
.sl-form small { font-weight: 400; color: var(--muted); }
.sl-form input, .sl-form select { min-height: 44px; padding: 0 0.6rem; border: 1.5px solid var(--rule); border-radius: 10px; background: #fff; font: 600 1rem var(--sans); color: var(--ink); box-sizing: border-box; width: 100%; }
.sl-form input:focus, .sl-form select:focus { outline: none; border-color: var(--accent); }
.sl-card { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 630; border-radius: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }
.sl-fine { margin: 0.35rem 0 0.8rem; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); text-align: center; }
.sl-dl { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--link); text-underline-offset: 2px; }