/* Import page (import.html) and button page (bookmark.html). Tokens come from tokens.css; every use has a literal fallback. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* reserved height: the status line and the result row never make the card jump */
.im-status { min-height: calc(var(--fs-md, 1rem) * 1.6); }   /* one line reserved, not a 50 px gap */
/* R4-sec-8: the Moodle address in large type, a warning under it */
.im-host { font-size: var(--fs-lg, 1.5rem); font-weight: 600; overflow-wrap: anywhere; margin: var(--s2, 8px) 0; }
.im-hostwarn { color: var(--bad, #b3261e); font-weight: 600; margin: var(--s2, 8px) 0; }
.im-host[hidden], .im-hostwarn[hidden] { display: none; }
#wait:empty { display: none; }
.im-card .btn.primary { background: var(--accent, #1f5eff); }
.im-bar { height: var(--s2, 8px); border-radius: var(--r-s, 6px); background: var(--line, #d8dde6); overflow: hidden; margin: var(--s3, 12px) 0; }
.im-bar[hidden] { display: none; }
.im-bar-fill { height: 100%; width: 100%; background: var(--accent, #1f5eff); transform: scaleX(0); transform-origin: left center; transition: transform var(--d-base, 200ms) var(--ease-out, cubic-bezier(.05, .7, .1, 1)); }
@media (prefers-reduced-motion: reduce) { .im-bar-fill { transition: none; } }

/* the import tab: one centred card, the same look as the sign-in card (surface, line, radius, shadow) */
.im-card { box-sizing: border-box; width: 100%; max-width: 480px; margin: var(--s5, 24px) auto; padding: var(--s5, 24px); background: var(--surface, #fff); border: 1px solid var(--line, #e1e5ec); border-radius: var(--r-m, 16px); box-shadow: var(--e1, 0 1px 2px rgb(16 24 40 / .06), 0 4px 12px rgb(16 24 40 / .06)); overflow-wrap: anywhere; }
.im-card h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 var(--s3, 12px); }   /* 24 px */
.im-card h2 { font-size: var(--fs-lg, 1.25rem); line-height: 1.3; margin: 0 0 var(--s3, 12px); display: flex; align-items: center; gap: var(--s2, 8px); }
.im-card .btn { min-height: var(--tap, 44px); justify-content: center; }
.im-card .row { margin-top: var(--s3, 12px); }

/* the import report: a plain verdict, one closed list per reason; calm colours (the tick is the only green, partial text is the warning colour) */
.im-report { font-size: var(--fs-md, 1rem); }
.im-tick { color: var(--ok, #1a7f4b); font-weight: 700; }
.im-tick[hidden] { display: none; }
.im-verdict { margin: 0 0 var(--s3, 12px); font-weight: 600; }
.im-verdict.im-warn { color: var(--warn, #9a5b00); }
.im-report ul { margin: var(--s2, 8px) 0; padding-left: var(--s5, 24px); }
.im-report ul[hidden] { display: none; }
.im-report details { border-top: 1px solid var(--line, #e1e5ec); }
.im-report summary { display: flex; align-items: center; min-height: var(--tap, 44px); cursor: pointer; list-style: none; }
.im-report summary::-webkit-details-marker { display: none; }
.im-report summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 var(--s3, 12px) 0 var(--s1, 4px); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--d-fast, 120ms) var(--ease-out, ease-out); }
.im-report details[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .im-report summary::before { transition: none; } }
.im-report details ul { margin-top: 0; }
.im-report .im-more { list-style: none; margin-left: calc(var(--s5, 24px) * -1); color: var(--muted, #5b6472); }
.im-copyrow { align-items: center; }
.im-copytext { box-sizing: border-box; width: 100%; margin-top: var(--s3, 12px); font: inherit; font-size: var(--fs-sm, .875rem); color: var(--ink, #1b1f24); background: var(--bg, #f7f8fb); border: 1px solid var(--line, #e1e5ec); border-radius: var(--r-s, 8px); padding: var(--s2, 8px); }
.im-copytext[hidden] { display: none; }
@media (max-width: 480px) { .im-card { margin-inline: 0; padding: var(--s4, 16px); } }

/* the button page (bookmark.html): the tick box and its label in one row, the copy and "I added it" options, the phone block */
.bm-ack { display: flex; gap: var(--s3, 12px); align-items: flex-start; min-height: var(--tap, 44px); padding: var(--s2, 8px) 0; }
.bm-ack input { flex: none; width: 24px; height: 24px; margin: 0; padding: 0; }
.bm-ack label > span { display: inline; margin: 0; font-size: inherit; color: inherit; }
.bm-ack label { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink, #172033); cursor: pointer; }
.bm-ack label a { font-size: var(--fs-sm, .875rem); color: var(--muted, #566074); white-space: nowrap; }
.bm-extra[hidden] { display: none; }
.bm-extra p { margin: var(--s2, 8px) 0; }
.bm-extra .btn { min-height: var(--tap, 44px); min-width: var(--tap, 44px); justify-content: center; }
.bm-extra ol { margin: var(--s2, 8px) 0; padding-left: var(--s5, 24px); }
.bm-extra input.bm-fallback { display: block; box-sizing: border-box; width: 100%; margin-top: var(--s2, 8px); padding: var(--s2, 8px); font: inherit; color: var(--ink, #172033); background: var(--surface, #fff); border: 1px solid var(--line, #e1e5ec); border-radius: var(--r-s, 8px); }
#bmPhoneDetails summary { display: flex; align-items: center; min-height: var(--tap, 44px); cursor: pointer; font-weight: 600; }
/* round 3 AX (L12-10): Windows High Contrast */
@media (forced-colors: active) { .im-bar { border: 1px solid CanvasText; background: Canvas; } .im-bar-fill { background: Highlight; forced-color-adjust: none; } }