/* Easy Learning Reference – ADR – Farligt gods. This page is made by Sassan Khalebani. */
.adr-notice{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--elr-warn);background:var(--elr-sign-soft);border-radius:var(--elr-radius);padding:14px 16px;margin:0 0 18px}
.adr-notice>.ico{width:28px;height:28px;flex:none;color:var(--elr-warn)}
.adr-notice p{margin:3px 0}
.adr-ed{font-size:.9rem;color:var(--elr-muted)}
.ico{width:20px;height:20px;flex:none}
.adr-tag{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px;font-family:var(--elr-f-display)}
.adr-tag .fa{text-transform:none;letter-spacing:0;font-size:.95rem}
.adr-path{border:1px solid var(--elr-line);border-radius:var(--elr-radius);background:var(--elr-panel);padding:12px 14px;margin:0 0 20px}
.adr-path ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:6px}
.adr-path a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px;border-radius:8px;text-decoration:none;color:var(--elr-ink);border:1px solid var(--elr-line);background:var(--elr-field)}
.adr-path a:hover{border-color:var(--elr-accent)}
.adr-path .n,.adr-n{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:50%;background:var(--elr-sign);color:#13202d;font-weight:800;font-family:var(--elr-f-display);flex:none}
.adr-sec h2 .adr-n{margin-inline-end:6px;vertical-align:middle}
/* the four kinds of boxes: label text + icon + border style, never colour alone */
.adr-box{border:1px solid var(--elr-line);border-inline-start-width:6px;border-radius:9px;padding:12px 14px;margin:14px 0;background:var(--elr-field)}
.adr-box p{margin:4px 0}
.adr-box.lag{border-inline-start-color:var(--elr-accent);background:var(--elr-accent-soft)}
.adr-box.tips{border-inline-start-color:var(--elr-ok);border-inline-start-style:double;border-inline-start-width:7px}
.adr-box.ex{border-inline-start-color:var(--elr-muted);border-inline-start-style:dashed}
.adr-box.check{border:2px solid var(--elr-warn);border-inline-start-width:6px;background:var(--elr-sign-soft)}
.adr-srcs{font-size:.85rem;color:var(--elr-muted)}
.adr-src{word-break:break-word}
.adr-list{padding-inline-start:1.2em}.adr-list li{margin:6px 0}
.adr-tab{width:100%;border-collapse:collapse;font-size:.95rem}
.adr-tab th,.adr-tab td{border:1px solid var(--elr-line);padding:7px 9px;text-align:start;vertical-align:top}
.adr-tab thead th{background:var(--elr-head)}
.adr-tab caption{text-align:start;font-weight:700;padding:4px 0 8px}
/* responsibility diagram */
.adr-roles{margin:14px 0}
.adr-roles .adv{border:2px dashed var(--elr-accent);border-radius:12px;padding:10px 14px;margin:0 0 10px;background:var(--elr-accent-soft)}
.adr-roles small{display:block;margin-top:4px;font-size:.9rem}
.adr-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:22px 18px;counter-reset:r}
.adr-flow li{position:relative;border:1px solid var(--elr-line);border-top:5px solid var(--elr-sign);border-radius:10px;padding:10px 12px;background:var(--elr-panel);counter-increment:r}
.adr-flow li::before{content:counter(r);position:absolute;top:-14px;inset-inline-start:10px;background:var(--elr-sign);color:#13202d;font-weight:800;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:.85rem}
.adr-flow li:not(:last-child)::after{content:"";position:absolute;inset-inline-end:-15px;top:40%;border:7px solid transparent;border-inline-start-color:var(--elr-muted)}
.adr-ref{display:inline-block;margin-top:6px;font-size:.78rem;font-weight:700;color:var(--elr-muted);font-family:var(--elr-f-mono)}
/* symbol library */
.adr-grid{list-style:none;margin:14px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:14px}
.adr-card{border:1px solid var(--elr-line);border-radius:12px;padding:12px;background:var(--elr-panel)}
.adr-card p{margin:5px 0;font-size:.93rem}
.adr-sym{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px;border:2px solid transparent;border-radius:10px;background:var(--elr-field);color:inherit;font:inherit;cursor:pointer;text-align:center}
.adr-sym:hover{border-color:var(--elr-accent)}
.adr-sym:focus-visible{outline:3px solid var(--elr-accent);outline-offset:2px}
.adr-sym .nm{display:block}
.adr-lab{width:118px;height:118px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.adr-mk{width:150px;max-width:100%;height:auto;color:var(--elr-ink)}
.adr-chip{display:inline-block;font-size:.72rem;font-weight:800;border:1px dashed currentColor;border-radius:999px;padding:1px 8px;margin-inline-end:4px}
.adr-pg{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.adr-pg li{border:1px solid var(--elr-line);border-radius:10px;padding:8px 12px;background:var(--elr-panel)}
.adr-pg b{font-size:1.3rem;margin-inline-end:6px}
/* fictional document */
.adr-doc{border:2px dashed var(--elr-muted);border-radius:10px;padding:12px;margin:14px 0;background:var(--elr-field)}
.adr-doc pre{white-space:pre-wrap;font-family:var(--elr-f-mono);font-size:.95rem;margin:8px 0;direction:ltr;text-align:left}
.adr-stamp{display:inline-block;font-weight:800;border:2px solid var(--elr-bad);color:var(--elr-bad);padding:2px 8px;border-radius:6px;transform:rotate(-1.5deg)}
.adr-ex{border:1px solid var(--elr-line);border-radius:10px;padding:4px 12px;margin:14px 0;background:var(--elr-panel)}
.adr-ex summary{min-height:44px;display:flex;align-items:center;gap:6px;font-weight:700;cursor:pointer}
.adr-steps{padding-inline-start:1.4em}.adr-steps li{margin:8px 0}
/* dialog */
.adr-dlg{max-width:min(560px,94vw);width:100%;border:0;border-radius:14px;padding:18px;background:var(--elr-panel);color:var(--elr-ink);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.adr-dlg::backdrop{background:rgba(10,16,22,.55)}
.adr-dlg h2{margin:0 0 8px;font-size:1.2rem}
.adr-dlg .big{display:flex;justify-content:center;margin:8px 0}
.adr-dlg .big svg{width:220px;height:auto;max-width:80%}
.adr-dlg .b{text-align:end;margin:12px 0 0}
/* training */
.adr-train{border:1px solid var(--elr-line);border-radius:12px;padding:12px;background:var(--elr-panel);margin:12px 0}
.adr-prog{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;margin:0 0 10px}
.adr-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--elr-line);margin:0 0 12px}
.adr-tabs button{min-height:44px;padding:6px 14px;border:1px solid var(--elr-line);border-bottom:0;border-radius:9px 9px 0 0;background:var(--elr-field);color:var(--elr-ink);font:inherit;font-weight:700;cursor:pointer}
.adr-tabs button[aria-selected="true"]{background:var(--elr-panel);border-top:4px solid var(--elr-sign);text-decoration:underline;text-underline-offset:4px}
.adr-fcbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 10px}
.adr-fcbar select{min-height:44px;font:inherit;padding:6px 8px;border:1px solid var(--elr-line);border-radius:8px;background:var(--elr-field);color:var(--elr-ink);max-width:100%}
.adr-fcbar .chk,.adr-gfilter label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:44px}
.adr-fcbar .chk input{width:22px;height:22px}
.adr-fc{border:2px solid var(--elr-line);border-radius:14px;padding:16px;min-height:200px;display:grid;gap:10px;place-items:center;text-align:center;background:var(--elr-field)}
.adr-fc.flip{border-color:var(--elr-accent)}
.adr-fc .n{font-size:.85rem;color:var(--elr-muted);margin:0}
.adr-fc .qx{font-size:1.4rem;font-weight:800;margin:0}
.adr-fc .qt{margin:0 0 6px;font-weight:700}
.adr-fc .fc-lab .adr-lab{width:130px;height:130px}
.adr-fc .a p{margin:3px 0}
.adr-fcbtns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.adr-fcbtns .elr-btn,.adr-reset .elr-btn,.adr-dlg .elr-btn{min-height:44px;border:1px solid var(--elr-line);background:var(--elr-field);color:var(--elr-ink)}
.adr-fcbtns .elr-btn.pri,.adr-dlg .elr-btn.pri{background:var(--elr-sign);color:#13202d;border-color:var(--elr-sign)}
.adr-q{padding-inline-start:1.4em}
.adr-q fieldset{border:1px solid var(--elr-line);border-radius:10px;padding:10px 12px;margin:0 0 12px}
.adr-q legend{font-weight:700;padding:0 4px}
.adr-opt{display:block;width:100%;min-height:44px;text-align:start;margin:6px 0;padding:8px 12px;border:1px solid var(--elr-line);border-radius:9px;background:var(--elr-field);color:var(--elr-ink);font:inherit;cursor:pointer}
.adr-opt:hover{border-color:var(--elr-accent)}
.adr-opt[aria-disabled]{cursor:default}
.adr-opt.right{border:3px solid var(--elr-ok);background:var(--elr-ok-soft)}
.adr-opt.wrong{border:3px dashed var(--elr-bad);background:var(--elr-bad-soft)}
.adr-opt .mk{display:block;font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.adr-expl .res{font-weight:800}
.adr-expl .res.ok{color:var(--elr-ok)}.adr-expl .res.bad{color:var(--elr-bad)}
.adr-done{font-weight:700}
.adr-mist{list-style:none;padding:0}
.adr-mist li{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin:8px 0;padding:8px 10px;border:1px solid var(--elr-line);border-radius:9px}
.adr-mist li .ico{color:var(--elr-warn)}
.adr-mist li .fa{flex-basis:100%}
/* glossary */
.adr-gfilter input{width:100%;max-width:420px;min-height:44px;font:inherit;padding:6px 10px;border:1px solid var(--elr-line);border-radius:8px;background:var(--elr-field);color:var(--elr-ink)}
.adr-gloss{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:10px}
.adr-gloss li{border:1px solid var(--elr-line);border-radius:10px;padding:10px 12px;background:var(--elr-panel)}
.adr-gloss dfn{font-style:normal;font-weight:800}
.adr-gloss p{margin:4px 0;font-size:.93rem}
.adr-srclist li{margin:6px 0;word-break:break-word}
.adr-made{font-size:.85rem;color:var(--elr-muted)}
@media (max-width:560px){.adr-flow li:not(:last-child)::after{inset-inline-end:auto;inset-inline-start:45%;top:auto;bottom:-19px;border-inline-start-color:transparent;border-top-color:var(--elr-muted)}
  .adr-lab{width:100px;height:100px}}
@media print{.adr-train,.adr-path,.adr-dlg,.adr-gfilter{display:none!important}.adr-card,.adr-box{break-inside:avoid}}
.adr-tw{overflow-x:auto;max-width:100%}
.adr-tw:focus-visible{outline:3px solid var(--elr-accent);outline-offset:2px}
@media (max-width:560px){.adr-tab{font-size:.85rem}.adr-tab th,.adr-tab td{padding:5px 6px}}