/* Carlito: a free font with the same letter shapes as Calibri. Used on devices without Calibri. */
@font-face{font-family:Carlito;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/carlito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Carlito;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/carlito-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:Carlito;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/carlito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:Carlito;font-style:italic;font-weight:700;font-display:swap;src:url(/fonts/carlito-latin-700-italic.woff2) format('woff2')}

:root{
  --red:#E20612; --red-deep:#B3040F; --red-tint:#FDEDEE;
  --ink:#1E1A1A; --ink-2:#5C5453; --ink-3:#8A807E;
  --ground:#F6F3F1; --paper:#FFFFFF; --line:#E5DEDB; --quote:#FAF5F2;
  --ok:#2F7D43; --ok-tint:#E4F2E7; --warn:#8F5400; --warn-tint:#FFF1D6;
  --deciding:#E4732A; --doing:#2F6DB5; --developing:#3E9A4E; --all:#7A7392;
  --link:#B3040F; --mark:rgba(226,6,18,.16);
  --field-line:#8A8A8A;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F4EFED; --ink-2:#BDB2AF; --ink-3:#8F8583;
    --ground:#141111; --paper:#1F1A1A; --line:#3A3131; --quote:#272020;
    --red-tint:#3A1517; --ok:#7CCB8E; --ok-tint:#16301C; --warn:#F0B55A; --warn-tint:#3A2A0C;
    --link:#FF6B70; --mark:rgba(255,107,112,.28);
  }
}
:root[data-theme="dark"]{
  --ink:#F4EFED; --ink-2:#BDB2AF; --ink-3:#8F8583;
  --ground:#141111; --paper:#1F1A1A; --line:#3A3131; --quote:#272020;
  --red-tint:#3A1517; --ok:#7CCB8E; --ok-tint:#16301C; --warn:#F0B55A; --warn-tint:#3A2A0C;
  --link:#FF6B70; --mark:rgba(255,107,112,.28);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--doing);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--mono);font-size:.82em;letter-spacing:.01em}
.label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* header */
.top{background:var(--red);color:#fff}
.top-in{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap}
.logo{height:72px;width:auto;display:block;margin-left:-8px}
.brand{display:flex;flex-direction:column;line-height:1.15;padding-left:18px;border-left:1px solid rgba(255,255,255,.45);margin-right:auto}
.brand-name{font-weight:700;font-size:1.3rem;letter-spacing:-.015em}
.brand-tag{font-size:.95rem;opacity:.92}
.views{display:flex;border:1.5px solid #fff;border-radius:999px;padding:3px;gap:2px;margin-block:10px}
.views button{background:transparent;border:0;color:#fff;padding:7px 16px;border-radius:999px;font-weight:700;font-size:.88rem;display:flex;gap:6px;align-items:center}
.views button[aria-pressed="true"]{background:#fff;color:var(--red-deep)}
.views button:focus-visible{outline-color:#fff}
.strip{background:var(--paper);border-bottom:1px solid var(--line)}
.strip-in{max-width:1180px;margin:0 auto;padding:9px 16px;display:flex;gap:4px 14px;flex-wrap:wrap;align-items:baseline;font-size:.9rem;color:var(--ink-2)}
.strip-in strong{color:var(--ink)}

/* layout */
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px;padding-block:24px 40px}
.student{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start}
@media (max-width:900px){.student{grid-template-columns:minmax(0,1fr)}}

/* chat */
.hello{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px}
.avatar{flex:none;width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;letter-spacing:.02em}
.avatar.sm{width:34px;height:34px;font-size:.78rem}
.hello h1{font-size:clamp(1.45rem,3.4vw,1.9rem)}
.hello p{color:var(--ink-2);margin-top:8px;max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.9rem;text-align:left}
.chip:hover{border-color:var(--red);color:var(--link)}
.thread{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.msg-q{align-self:flex-end;max-width:min(80%,560px);background:var(--ink);color:var(--ground);padding:10px 16px;border-radius:18px 18px 4px 18px}
.msg-a{display:flex;gap:12px;align-items:flex-start}
.bubble{flex:1;min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.bubble .sum{max-width:66ch}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;border-radius:999px;padding:3px 10px;letter-spacing:.01em}
.pill.ok{background:var(--ok-tint);color:var(--ok)}
.pill.warn{background:var(--warn-tint);color:var(--warn)}
.pill.red{background:var(--red-tint);color:var(--link)}
.pill.grey{background:var(--ground);color:var(--ink-2);border:1px solid var(--line)}
figure.quote{margin:0;background:var(--quote);border-radius:10px;padding:14px 18px 14px 46px;position:relative}
figure.quote::before{content:"\201C";position:absolute;left:12px;top:2px;font:700 3rem/1 var(--serif);color:var(--red)}
figure.quote blockquote{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.6;max-width:64ch}
figure.quote mark{background:linear-gradient(transparent 55%,var(--mark) 55%);color:inherit}
figure.quote figcaption{margin-top:10px;font-size:.82rem;color:var(--ink-2);display:flex;gap:4px 10px;flex-wrap:wrap;align-items:center}
.type{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink-2);background:var(--paper)}
details.more{font-size:.92rem}
details.more summary{cursor:pointer;color:var(--link);font-weight:700;font-size:.86rem}
details.more .quote{margin-top:10px}
.next{display:flex;flex-direction:column;gap:8px}
.fb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.86rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.btn{border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:7px 14px;font-weight:700;font-size:.88rem}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn.sm{padding:4px 10px;font-size:.8rem}
.btn.ghost{background:transparent}
.btn.danger{color:var(--link)}
.typing{display:flex;gap:5px;padding:6px 2px}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none}}
.composer{position:sticky;bottom:0;padding-block:16px 12px;background:linear-gradient(transparent,var(--ground) 22%);margin-top:20px}
.ask{display:flex;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;padding:6px 6px 6px 16px;align-items:center}
.ask:focus-within{border-color:var(--red)}
.ask input[type=text],.ask input[type=text]:focus{flex:1;min-width:0;border:0;background:transparent;padding:10px 0;font-size:1.05rem;outline:none}
.scope{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-2);margin-bottom:8px}
.note{font-size:.8rem;color:var(--ink-3);margin-top:8px}

/* side */
.side{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px;position:sticky;top:16px}
@media (max-width:900px){.side{position:static}}
.side h2{font-size:1rem}
.areas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.areas button{width:100%;display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;text-align:left;background:transparent;border:0;border-radius:8px;padding:7px 8px;font-size:.9rem}
.areas button:hover,.areas button[aria-current="true"]{background:var(--ground)}
.areas button[aria-current="true"]{font-weight:700}
.dot{width:10px;height:10px;border-radius:3px;background:var(--all)}
.dot.deciding{background:var(--deciding)}.dot.doing{background:var(--doing)}.dot.developing{background:var(--developing)}
.count{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:.78rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:12px}
.legend span{display:inline-flex;gap:6px;align-items:center}

/* lecturer */
.lock{max-width:420px;margin:48px auto;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:.84rem;font-weight:700}
.field small{color:var(--ink-3);font-size:.8rem}
input[type=text],input[type=password],input[type=url],input[type=email],select,textarea{background:var(--paper);border:1px solid var(--field-line);border-radius:8px;padding:9px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--red);outline-offset:0;border-color:var(--red)}
textarea{min-height:120px;resize:vertical;line-height:1.5}
.lec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.lec-head h1{font-size:1.6rem}
.lec-head p{color:var(--ink-2);margin-top:4px}
.tabs{display:flex;gap:4px 24px;border-bottom:1px solid var(--line);margin:18px 0 24px;overflow-x:auto}
.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:10px 2px;font-weight:700;color:var(--ink-2);white-space:nowrap;display:flex;gap:8px;align-items:center}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--red)}
.badge{background:var(--red);color:#fff;border-radius:999px;font-size:.72rem;padding:1px 8px;font-family:var(--mono)}
.two{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1;min-width:0}
.title-input{font-size:1.25rem!important;font-weight:700;letter-spacing:-.01em}
.mat{border-top:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;gap:6px}
.mat:first-child{border-top:0;padding-top:0}
.mat h3{font-size:1rem}
.mat .meta{font-size:.82rem;color:var(--ink-2);display:flex;gap:4px 12px;flex-wrap:wrap;align-items:center}
.mat .prev{font-size:.88rem;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.form-grid{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px}
@media (max-width:620px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--paper);padding:14px 16px}
.stat b{display:block;font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{font-size:.82rem;color:var(--ink-2)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 12px}
.filters button{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.84rem}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.log{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.log-row{border-top:1px solid var(--line)}
.log-row:first-child{border-top:0}
.log-head{width:100%;display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;background:transparent;border:0;padding:12px 16px}
.log-head:hover{background:var(--ground)}
.log-head .q{font-weight:700;overflow-wrap:anywhere}
.log-head .when{font-family:var(--mono);font-size:.74rem;color:var(--ink-3)}
@media (max-width:620px){.log-head{grid-template-columns:minmax(0,1fr)}}
.log-body{padding:4px 16px 18px;display:flex;flex-direction:column;gap:12px}
.given{font-size:.95rem;max-width:70ch}
.callout{background:var(--red-tint);border-radius:12px;padding:14px 18px;font-size:.92rem}
.callout ol{margin:8px 0 0;padding-left:20px}
.callout li{margin:3px 0}
.bars{display:flex;flex-direction:column;gap:6px;font-size:.84rem}
.bar{display:grid;grid-template-columns:minmax(0,180px) 1fr 28px;gap:10px;align-items:center}
.bar i{display:block;height:8px;border-radius:4px;background:var(--red)}
.bar span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{padding:28px;text-align:center;color:var(--ink-2)}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--ground);padding:10px 18px;border-radius:10px;font-weight:700;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;z-index:10}
#toast.on{opacity:1}

/* hosted version additions */
.emailbox{background:var(--red-tint);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.emailbox .row input{flex:1;min-width:180px}
.emailbox small{color:var(--ink-2);font-size:.78rem}
.setup{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:start;font-size:.92rem}
.setup .pill{justify-self:start}
.code{font-family:var(--mono);font-size:.78rem;background:var(--ground);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow-x:auto;white-space:pre;display:block}
.check{display:flex;gap:8px;align-items:center;font-size:.9rem}
.check input{width:auto}
.err{color:var(--link);font-size:.88rem;font-weight:700}

.views a.btn-view{color:#fff;text-decoration:none;padding:7px 16px;font-weight:700;font-size:.88rem}

/* open and closed study areas */
input[type=date]{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:8px 12px;width:100%}
.tag-closed{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:.7rem;font-weight:700;color:var(--ink-2);background:var(--ground);border:1px solid var(--line);border-radius:999px;padding:1px 7px;white-space:nowrap;vertical-align:middle}
.access.is-closed{background:var(--warn-tint);border-color:transparent}
.access.is-open{background:var(--ok-tint);border-color:transparent}

/* ---------- Student view: minimalist, in the colours of Blackboard ---------- */
body.bb{
  --red:#262626; --red-deep:#000000; --red-tint:#F4F1F8; --link:#5B2C9D; --mark:rgba(91,44,157,.16);
  --ink:#262626; --ink-2:#5F5F5F; --ink-3:#6B6B6B; --ground:#FFFFFF; --paper:#FFFFFF; --line:#DEDEDE; --quote:#F8F8F8;
  --sans:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.bb{--red:#F2F2F2; --red-deep:#FFFFFF; --red-tint:#2A2433; --link:#C3A2F2; --mark:rgba(195,162,242,.26); --ink:#F2F2F2; --ink-2:#B8B8B8; --ink-3:#8C8C8C; --ground:#1B1B1B; --paper:#1B1B1B; --line:#3A3A3A; --quote:#262626}
}
:root[data-theme="dark"] body.bb{--red:#F2F2F2; --red-deep:#FFFFFF; --red-tint:#2A2433; --link:#C3A2F2; --mark:rgba(195,162,242,.26); --ink:#F2F2F2; --ink-2:#B8B8B8; --ink-3:#8C8C8C; --ground:#1B1B1B; --paper:#1B1B1B; --line:#3A3A3A; --quote:#262626}
.bb .bar{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line);font-size:.88rem}
.bb .bar-logo{height:30px;width:auto;display:block;border-radius:2px}
.bb .bar-name{font-weight:700}
.bb .bar-mod{margin-left:auto;color:var(--ink-2);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:620px){.bb .bar-mod{display:none}}
.bb .page{max-width:760px;margin:0 auto;padding-inline:20px;padding-block:24px 24px;display:flex;flex-direction:column;min-height:calc(100vh - 52px)}
.bb .page.is-empty{justify-content:center;padding-bottom:16vh}
.bb .intro h1{font-size:clamp(1.5rem,3.6vw,2rem);font-weight:600;letter-spacing:-.02em}
.bb .intro p{color:var(--ink-2);margin-top:8px}
.bb .thread{margin-top:0;gap:22px}
.bb .page:not(.is-empty) .thread{flex:1}
.bb .msg-q{background:var(--quote);color:var(--ink);border-radius:14px;padding:9px 15px}
.bb .bubble{border:0;padding:0;border-radius:0;background:transparent;gap:12px}
.bb figure.quote{border-radius:6px}
.bb figure.quote::before{color:var(--link)}
.bb .pill.ok{background:#E6F2EA;color:#1F6B3A}
.bb .composer{background:linear-gradient(transparent,var(--ground) 18%);padding-block:20px 8px;margin-top:16px}
.bb .page.is-empty .composer{position:static;margin-top:22px;padding-top:0}
.bb .ask-row{display:flex;align-items:center;gap:14px}
.bb .avatar{background:var(--ink);color:var(--ground);object-fit:cover;flex:none}
.bb .avatar.lg{width:64px;height:64px;font-size:1.05rem}
.bb img.avatar{background:var(--quote);border:1px solid var(--line)}
@media (max-width:520px){.bb .avatar.lg{width:48px;height:48px}}
.bb .ask{flex:1;border:1px solid var(--ink-3);border-radius:6px;padding:4px 4px 4px 14px}
.bb .ask:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.bb .ask:focus-within{outline:3px solid var(--accent,var(--link));outline-offset:2px} /* a clear focus ring on the question box (WCAG 2.4.7) */
.bb .btn{border-radius:4px}
.bb .btn.primary{color:var(--ground)}
.bb .under{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:12px;padding-left:78px;font-size:.86rem}
@media (max-width:520px){.bb .under{padding-left:0}}
.bb .under select{width:auto;border:0;background:transparent;color:var(--ink-2);padding:2px 0;font-size:.86rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.bb .try{color:var(--ink-3)}
.bb .textlink{background:none;border:0;padding:0;color:var(--link);text-decoration:underline;text-underline-offset:3px;text-align:left;font-size:.86rem}
.bb .chip{border-radius:4px}
.bb .chip:hover{border-color:var(--ink);color:var(--ink)}
.bb .emailbox{border-radius:6px}
.bb .note{padding-left:78px}
@media (max-width:520px){.bb .note{padding-left:0}}
.bb :focus-visible{outline-color:var(--link)}

/* ---------- Student view: matched to UWE Blackboard Ultra (seen 21 Sep 2026) ---------- */
body.bb{--ground:#F8F8F8; --paper:#FFFFFF; --line:#DFDFDF; --quote:#F8F8F8; --link:#1F6AA5; --accent:#9B4FC4; --accent-soft:#C77DDB; --mark:rgba(181,101,217,.2); --red-tint:#F7F1FB}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.bb{--ground:#1B1B1B; --paper:#262626; --line:#3D3D3D; --quote:#1F1F1F; --link:#7DB7E8; --accent:#C77DDB; --accent-soft:#C77DDB; --red-tint:#2C2433}
}
:root[data-theme="dark"] body.bb{--ground:#1B1B1B; --paper:#262626; --line:#3D3D3D; --quote:#1F1F1F; --link:#7DB7E8; --accent:#C77DDB; --accent-soft:#C77DDB; --red-tint:#2C2433}
.bb .bar{background:#262626;color:#FFFFFF;border-bottom:0;padding:0 20px;min-height:52px}
.bb .bar-name{align-self:stretch;display:flex;align-items:center;border-bottom:3px solid var(--accent-soft);padding-top:3px}
.bb .bar-mod{color:#D6D6D6}
.bb .bubble{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:16px 18px}
.bb .msg-q{background:#E9E9E9;color:#262626;border-radius:2px}
.bb .ask{background:var(--paper);border-radius:2px;border-color:var(--ink)}
.bb .btn,.bb .chip,.bb .emailbox,.bb figure.quote,.bb input[type=email]{border-radius:2px}
.bb .btn{border-color:var(--ink)}
.bb .btn.primary{border-color:var(--red)}
.bb figure.quote::before{color:var(--accent)}
.bb .under select{color:var(--link)}
.bb .avatar{border-radius:50%}
.bb :focus-visible{outline-color:var(--accent)}
.bb .avatar.lg{width:80px;height:80px}
.bb .under,.bb .note{padding-left:94px}
@media (max-width:520px){.bb .avatar.lg{width:52px;height:52px}.bb .under,.bb .note{padding-left:0}}

/* ---------- Student view: no top bar, Calibri, clear list of what it can do ---------- */
body.bb{--sans:Calibri,Carlito,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:18px;line-height:1.5}
.bb h1,.bb h2,.bb h3{font-family:var(--sans)}
.bb .label,.bb .type,.bb .pill,.bb .btn{font-family:var(--sans)}
.bb .page{min-height:100vh;max-width:820px}
.bb .page.is-empty{justify-content:flex-start;padding-top:9vh;padding-bottom:40px}
.bb .intro h1{font-weight:700;font-size:clamp(1.6rem,3.8vw,2.15rem)}
.bb .ask input[type=text]{font-size:1.1rem}
.bb .note{font-size:.84rem}
.bb .can,.bb .examples{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.bb .can h2,.bb .examples h2{font-size:1.15rem;margin-bottom:10px}
.bb .can ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px}
.bb .can li{padding-left:26px;position:relative}
.bb .can li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}
.bb .cannot{margin-top:12px;color:var(--ink-2);font-size:.95rem}
.bb .ex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.bb .ex-group{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bb .ex-group h3{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px}
.bb .ex{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:8px 12px;text-align:left;width:100%;font-size:1rem;line-height:1.35;color:var(--ink)}
.bb .ex:hover{border-color:var(--ink)}
@media (max-width:620px){.bb .can ul,.bb .ex-grid{grid-template-columns:minmax(0,1fr)}}

/* the email the assistant writes for the student */
.draft{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:12px 14px;font-size:.95rem;display:flex;flex-direction:column;gap:4px}
.draft pre{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.emailbox a.btn{text-decoration:none;color:var(--ink);display:inline-flex;align-items:center}

/* ---------- Private view: matched to UWE Blackboard Ultra ---------- */
body.bba{
  --red:#262626; --red-deep:#000000; --red-tint:#F4EEF8; --link:#1F6AA5; --mark:rgba(181,101,217,.2); --accent:#C77DDB;
  --ink:#262626; --ink-2:#5F5F5F; --ink-3:#6B6B6B; --ground:#F8F8F8; --paper:#FFFFFF; --line:#DFDFDF; --quote:#F8F8F8;
  --ok:#1F6B3A; --ok-tint:#E6F2EA; --warn:#7A4E00; --warn-tint:#FFF3D9;
  --sans:Calibri,Carlito,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.bba{--red:#161616; --red-deep:#000; --red-tint:#2C2433; --link:#7DB7E8; --ink:#F2F2F2; --ink-2:#B8B8B8; --ink-3:#8C8C8C; --ground:#1B1B1B; --paper:#262626; --line:#3D3D3D; --quote:#1F1F1F; --ok:#7CCB8E; --ok-tint:#16301C; --warn:#F0B55A; --warn-tint:#3A2A0C}
}
:root[data-theme="dark"] body.bba{--red:#161616; --red-deep:#000; --red-tint:#2C2433; --link:#7DB7E8; --ink:#F2F2F2; --ink-2:#B8B8B8; --ink-3:#8C8C8C; --ground:#1B1B1B; --paper:#262626; --line:#3D3D3D; --quote:#1F1F1F; --ok:#7CCB8E; --ok-tint:#16301C; --warn:#F0B55A; --warn-tint:#3A2A0C}
body.bba{font-size:16px}
.bba .top{background:#262626;color:#fff}
.bba .top-in{gap:8px 14px}
.bba .logo{height:44px;margin-left:0;border-radius:2px;margin-block:10px}
.bba .brand{border-left-color:rgba(255,255,255,.3);padding-left:14px}
.bba .brand-name{font-size:1.15rem}
.bba .brand-tag{font-size:.88rem;color:#D6D6D6}
.bba .views{border-color:#D6D6D6;border-radius:2px;padding:0}
.bba .views a.btn-view{color:#fff;padding:7px 14px}
.bba .strip{background:#262626;border-bottom:0}
.bba .strip-in{color:#D6D6D6;padding-top:0;padding-bottom:12px}
.bba .strip-in strong{color:#fff}
.bba .strip-in .mono{color:#D6D6D6}
.bba .tabs button[aria-selected="true"]{border-bottom-color:var(--accent);color:var(--ink)}
.bba .badge{background:var(--accent);color:#262626}
.bba .panel,.bba .log,.bba .stats,.bba .lock,.bba .bubble{border-radius:2px}
.bba .stat b{color:var(--ink)}
.bba .btn,.bba .chip,.bba input[type=text],.bba input[type=password],.bba input[type=url],.bba input[type=email],.bba input[type=date],.bba select,.bba textarea,.bba .code,.bba .callout,.bba .emailbox,.bba figure.quote,.bba .draft,.bba .access{border-radius:2px}
.bba .btn{border-color:var(--ink)}
.bba .btn.primary{background:#262626;border-color:#262626;color:#fff}
.bba .btn.primary:hover{background:#000;border-color:#000}
.bba .btn.danger{color:#A4262C}
.bba .filters button{border-radius:2px}
.bba .filters button[aria-pressed="true"]{background:#262626;border-color:#262626;color:#fff}
.bba .areas button[aria-current="true"]{background:var(--quote);box-shadow:inset 3px 0 0 var(--accent)}
.bba .pill.red{background:#FDECEC;color:#A4262C}
.bba .pill.ok{background:var(--ok-tint);color:var(--ok)}
.bba figure.quote::before{color:var(--accent)}
.bba .access.is-open{background:var(--ok-tint)}
.bba .access.is-closed{background:var(--warn-tint)}
.bba .tag-closed{border-radius:2px}
.bba .type{border-radius:2px}
.bba .lock{border:1px solid var(--line)}
.bba :focus-visible{outline-color:var(--accent)}
/* Research counts switch and the wellbeing reply (ethics plan, changes 1 and 2) */
.under .linkish{border:0;background:none;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;font:inherit;cursor:pointer;padding:2px 0}
.note a{color:inherit}
.research-box{margin-top:8px;padding:10px 14px;border-radius:10px;background:var(--paper);border:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.research-box label{display:flex;gap:8px;align-items:flex-start;font-weight:600;color:var(--ink);cursor:pointer}
.research-box p{margin:6px 0 0}
.emailbox.wb ul{margin:0;padding-left:20px}
/* File choosers: hidden from sight but still reachable with the Tab key (WCAG 2.1.1). The label around them shows the focus ring. */
.file-in{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
label:has(+ .file-in:focus-visible){outline:3px solid var(--link);outline-offset:2px}
/* Private view: focus rings and red text that are clear in light and dark mode (WCAG 1.4.3, 1.4.11, 2.4.7) */
body.bba{--focus:#9B4FC4; --danger:#A4262C}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.bba{--focus:#C77DDB; --danger:#FF8A8F}}
:root[data-theme="dark"] body.bba{--focus:#C77DDB; --danger:#FF8A8F}
.bba :focus-visible{outline-color:var(--focus)}
.bba input:focus,.bba select:focus,.bba textarea:focus{outline-color:var(--focus);border-color:var(--focus)}
.bba .ask:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.bba .btn.danger{color:var(--danger)}
.access .label{color:var(--ink-2)}

/* ---------- Sooner platform look (Oct 2026) ----------
   Light only: the pages set data-theme="light", so the dark colours above are not used.
   Paper background, white cards, ink text, VL blue (#2F6DB5) for buttons, links, marks and focus rings.
   /sooner/sooner.css loads after this file and gives the font, the top bar and the shared buttons. */
[data-app="vl"] body.bb, [data-app="vl"] body.bba, [data-app="vl"] body{
  --red:#2F6DB5; --red-deep:#245A97; --red-tint:#E7F0FA; --link:#2F6DB5; --mark:rgba(47,109,181,.18);
  --accent:#2F6DB5; --accent-soft:#2F6DB5; --focus:#2F6DB5; --danger:#B42A2A;
  --ink:#1D2230; --ink-2:#5F6673; --ink-3:#5F6673; --ground:#F6F5F1; --paper:#FFFFFF; --line:#E3E5EA; --quote:#F4F7FB;
  --field-line:#8A8F99; --doing:#2F6DB5;
  --ok:#1F6B3A; --ok-tint:#E6F2EA; --warn:#7A4E00; --warn-tint:#FFF3D9;
  --sans:"Plus Jakarta Sans",Carlito,Calibri,Arial,sans-serif; --serif:"Plus Jakarta Sans",Carlito,Calibri,Arial,sans-serif;
  background:#F6F5F1; color:#1D2230;
}
/* A clear focus ring in VL blue (the shared amber ring is too pale on the paper background). */
[data-app="vl"] :focus-visible{outline:3px solid #2F6DB5;outline-offset:2px;box-shadow:none}
[data-app="vl"] input:focus,[data-app="vl"] select:focus,[data-app="vl"] textarea:focus{outline:2px solid #2F6DB5;outline-offset:0;border-color:#2F6DB5}
[data-app="vl"] .sooner-bar .sooner-btn{min-height:38px}
[data-app="vl"] .mono{font-family:var(--sans);font-weight:700;letter-spacing:.02em}
[data-app="vl"] .label{color:var(--ink-2)}

/* buttons, cards, fields: rounder and calmer */
[data-app="vl"] .btn{background:#fff;border:1.5px solid #C9CDD6;border-radius:999px;padding:8px 16px;color:var(--ink);font-weight:600;font-family:var(--sans)}
[data-app="vl"] .btn:hover{border-color:#2F6DB5;color:#245A97}
[data-app="vl"] .btn.primary{background:#2F6DB5;border-color:#2F6DB5;color:#fff}
[data-app="vl"] .btn.primary:hover{background:#245A97;border-color:#245A97;color:#fff}
[data-app="vl"] .btn.sm{padding:4px 12px;font-size:.84rem}
[data-app="vl"] .btn.ghost{background:transparent;border-color:transparent}
[data-app="vl"] .btn.danger{color:var(--danger)}
[data-app="vl"] .panel,[data-app="vl"] .log,[data-app="vl"] .stats,[data-app="vl"] .lock,[data-app="vl"] .side{border-radius:14px;border-color:var(--line);box-shadow:0 1px 2px rgba(29,34,48,.05),0 4px 16px rgba(29,34,48,.05)}
[data-app="vl"] input[type=text],[data-app="vl"] input[type=password],[data-app="vl"] input[type=url],[data-app="vl"] input[type=email],[data-app="vl"] input[type=date],[data-app="vl"] select,[data-app="vl"] textarea{border-radius:8px;border:1.5px solid #8A8F99;background:#fff;min-height:44px}
[data-app="vl"] .code,[data-app="vl"] .callout,[data-app="vl"] .emailbox,[data-app="vl"] figure.quote,[data-app="vl"] .draft,[data-app="vl"] .access,[data-app="vl"] .research-box{border-radius:12px}
[data-app="vl"] .type,[data-app="vl"] .tag-closed{border-radius:6px;font-family:var(--sans)}
[data-app="vl"] .chip,[data-app="vl"] .filters button{border-radius:999px}
[data-app="vl"] .filters button[aria-pressed="true"]{background:#2F6DB5;border-color:#2F6DB5;color:#fff}
[data-app="vl"] .pill.red{background:#FBEAE8;color:#A4262C}
[data-app="vl"] figure.quote{background:var(--quote);border-left:4px solid #2F6DB5}
[data-app="vl"] figure.quote::before{color:#2F6DB5;font-family:Georgia,serif}
[data-app="vl"] figure.quote blockquote{font-family:var(--sans)}
[data-app="vl"] .emailbox{background:#E7F0FA}
[data-app="vl"] .bar i{background:#2F6DB5}
[data-app="vl"] #toast{background:#1D2230;color:#fff}

/* ---------- Staff page ---------- */
[data-app="vl"] .bba .top{background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
[data-app="vl"] .bba .brand{border-left-color:var(--line)}
[data-app="vl"] .bba .brand-tag{color:var(--ink-2)}
[data-app="vl"] .bba .views{border-color:#C9CDD6;border-radius:999px}
[data-app="vl"] .bba .views a.btn-view{color:#245A97}
[data-app="vl"] .bba .strip{background:#fff;border-bottom:1px solid var(--line)}
[data-app="vl"] .bba .strip-in{color:var(--ink-2);padding:10px 16px;align-items:center}
[data-app="vl"] .bba .strip-in strong,[data-app="vl"] .bba .strip-in .mono{color:var(--ink)}
[data-app="vl"] .vl-strip{position:relative;z-index:1}
[data-app="vl"] .vl-strip .strip-in{padding-block:12px;max-width:1180px}
[data-app="vl"] .vl-student-link{margin-left:auto;min-height:36px;padding:6px 14px;font-size:14px}
[data-app="vl"] .bba .tabs button{color:var(--ink-2);font-weight:600}
[data-app="vl"] .bba .tabs button[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:#2F6DB5}
[data-app="vl"] .bba .badge{background:#2F6DB5;color:#fff;font-family:var(--sans);font-weight:700}
[data-app="vl"] .bba .areas button{border-radius:10px}
[data-app="vl"] .bba .areas button[aria-current="true"]{background:#E7F0FA;box-shadow:inset 3px 0 0 #2F6DB5}
[data-app="vl"] .bba .areas button:hover{background:#F3F4F6}
[data-app="vl"] .bba .access.is-open{background:#E6F2EA;border:0}
[data-app="vl"] .bba .access.is-closed{background:#FFF3D9;border:0}
[data-app="vl"] .bba .lec-head h1{font-weight:800;font-size:1.7rem}
[data-app="vl"] .bba .stat b{color:#245A97}
[data-app="vl"] .avatar{background:#2F6DB5;color:#fff}
@media (max-width:640px){
  [data-app="vl"] .vl-strip .strip-in{font-size:.86rem}
  [data-app="vl"] .vl-student-link{margin-left:0}
  [data-app="vl"] .bba .lec-head h1{font-size:1.4rem}
  /* titles keep their width; the "Set up in the Module Manager" tag moves to the next line */
  [data-app="vl"] .bba .mat .row .grow{flex:1 1 60%}
  [data-app="vl"] .bba .access .row .grow{flex:1 1 100%}
}

/* ---------- Student page: light and friendly, the question box in the middle ---------- */
[data-app="vl"] .vl-top{background:#fff;border-bottom:1px solid var(--line);position:relative}
[data-app="vl"] .vl-top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#2F6DB5}
[data-app="vl"] .vl-top-in{max-width:820px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
[data-app="vl"] .vl-top-mark{width:28px;height:28px;display:block}
[data-app="vl"] .vl-top-name{font-weight:800;font-size:1.02rem;letter-spacing:-.01em}
[data-app="vl"] .vl-top-mod{margin-left:auto;color:var(--ink-2);font-size:.9rem;min-width:0;overflow-wrap:anywhere;text-align:right}
[data-app="vl"] .vl-top-code{font-weight:700;color:var(--ink)}
@media (max-width:520px){[data-app="vl"] .vl-top-mod{margin-left:0;flex-basis:100%;text-align:left;font-size:.84rem}}
[data-app="vl"] body.bb{font-size:17px}
[data-app="vl"] .bb .page{min-height:calc(100vh - 56px)}
[data-app="vl"] .bb .page.is-empty{padding-top:6vh}
[data-app="vl"] .bb .intro h1{font-weight:800;font-size:clamp(1.55rem,3.8vw,2.2rem);letter-spacing:-.02em}
[data-app="vl"] .bb .page.is-empty .composer{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 2px 4px rgba(29,34,48,.06),0 10px 28px rgba(29,34,48,.08)}
[data-app="vl"] .bb .composer{background:linear-gradient(rgba(246,245,241,0),#F6F5F1 22%)}
[data-app="vl"] .bb .ask{background:#fff;border:1.5px solid #8A8F99;border-radius:999px;padding:5px 5px 5px 18px}
[data-app="vl"] .bb .ask:focus-within{border-color:#2F6DB5;box-shadow:0 0 0 1px #2F6DB5;outline:3px solid rgba(47,109,181,.35);outline-offset:2px}
[data-app="vl"] .bb .ask input[type=text]{border:0;min-height:0;background:transparent;font-size:1.08rem}
[data-app="vl"] .bb .ask input[type=text]:focus{outline:none}
[data-app="vl"] .bb .ask .btn.primary{min-height:44px;padding:8px 22px;font-size:1rem;border-radius:999px}
[data-app="vl"] .bb .avatar{background:#2F6DB5;color:#fff;font-weight:800;letter-spacing:.03em;border:3px solid #E7F0FA}
[data-app="vl"] .bb img.avatar{background:#E7F0FA;border:3px solid #E7F0FA}
[data-app="vl"] .bb .under select{color:#245A97;font-weight:600}
[data-app="vl"] .bb .under .linkish{color:var(--ink-2)}
[data-app="vl"] .bb .note{color:var(--ink-2)}
[data-app="vl"] .bb .note a{color:#245A97}
[data-app="vl"] .bb .can,[data-app="vl"] .bb .examples{border-top:0;margin-top:28px;padding-top:0}
[data-app="vl"] .bb .can{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px}
[data-app="vl"] .bb .can h2,[data-app="vl"] .bb .examples h2{font-weight:700}
[data-app="vl"] .bb .can li::before{border-color:#2F6DB5}
[data-app="vl"] .bb .ex-group h3{color:var(--ink-2)}
[data-app="vl"] .bb .ex{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px 14px;transition:border-color .15s ease,background-color .15s ease}
[data-app="vl"] .bb .ex:hover{border-color:#2F6DB5;background:#F4F7FB}
[data-app="vl"] .bb .msg-q{background:#E7F0FA;color:var(--ink);border-radius:18px 18px 4px 18px;padding:10px 16px}
[data-app="vl"] .bb .bubble{background:#fff;border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:18px 20px;box-shadow:0 1px 2px rgba(29,34,48,.05),0 4px 16px rgba(29,34,48,.05)}
[data-app="vl"] .bb .btn,[data-app="vl"] .bb .chip,[data-app="vl"] .bb input[type=email]{border-radius:999px}
[data-app="vl"] .bb .emailbox,[data-app="vl"] .bb figure.quote,[data-app="vl"] .bb .draft{border-radius:12px}
[data-app="vl"] .bb .chip{background:#fff;border:1.5px solid var(--line)}
[data-app="vl"] .bb .chip:hover{border-color:#2F6DB5;color:#245A97}
[data-app="vl"] .bb .btn{border-color:#C9CDD6}
[data-app="vl"] .bb .btn.primary{border-color:#2F6DB5;color:#fff}
[data-app="vl"] .bb .typing i{background:#2F6DB5}
@media (prefers-reduced-motion:reduce){[data-app="vl"] .bb .ex{transition:none}}
@media (max-width:520px){
  [data-app="vl"] .bb .page{padding-inline:16px}
  [data-app="vl"] .bb .page.is-empty .composer{padding:16px;border-radius:16px}
  [data-app="vl"] .bb .ask{padding-left:14px}
  [data-app="vl"] .bb .ask .btn.primary{padding:8px 16px}
  [data-app="vl"] .bb .can{padding:16px 18px}
}

/* ---------- Platform fix round (22 Oct 2026): UI review findings 1, 2, 11, 14 and 16 ---------- */
/* Tabs: full names on a laptop, short names on a phone (finding 2). The row uses the shared .sooner-tabs
   sideways scroll; its right-edge fade goes away once the last tab is in view. */
[data-app="vl"] .tabs .t-short{display:none}
[data-app="vl"] .tabs.sooner-tabs.at-end{-webkit-mask-image:none;mask-image:none}
/* Items from the Module Manager: one line at the top, a small lock on each item (finding 11). */
[data-app="vl"] .mm-note{display:flex;gap:8px;align-items:flex-start}
[data-app="vl"] .mm-note svg{flex:none;margin-top:3px}
[data-app="vl"] .mm-lock{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:var(--ground);border:1px solid var(--line);color:var(--ink-2);flex:none}
/* A clear ring on the student question box (finding 16). */
[data-app="vl"] .bb .ask:focus-within{outline-color:#2F6DB5}
[data-app="vl"] .bb .research-row{margin-top:4px}
@media (max-width:640px){
  [data-app="vl"] .tabs{gap:4px 18px}
  [data-app="vl"] .tabs .t-long{display:none}
  [data-app="vl"] .tabs .t-short{display:inline}
  [data-app="vl"] .tabs button{min-height:44px}
  /* Tap targets of 44 px that the shared phone rule does not reach (finding 1). */
  [data-app="vl"] .sooner-bar .sooner-btn,
  [data-app="vl"] .vl-student-link,
  [data-app="vl"] .bba .areas button,
  [data-app="vl"] .filters button,
  [data-app="vl"] .bb .ex,
  [data-app="vl"] .under .linkish{min-height:44px}
  [data-app="vl"] .filters button{min-width:44px}
  [data-app="vl"] .mat .meta a,
  [data-app="vl"] figure.quote figcaption a{display:inline-flex;align-items:center;min-height:44px}
}