/* WikiMas application additions to design/wikimas.css.
   Only what the design preview does not carry: its prototype harness is gone, so the offset for
   it is zero; the application needs real form controls, a profile menu, link-based navigation and
   a sign-in page. Tokens only, no literal colours, so both themes keep working. */

:root{--h-harness:0px}
/* The page runs to the window's edges: the browser's own margin around it went with the harness, and would leave the
   header and the bar at the foot of a material eight pixels short of them (decision 0111). */
body{margin:0}

/* Links that look like the preview's buttons */
a.nav__item,a.brand,a.btn,a.tab,a.mat-link{text-decoration:none}
a.brand{color:inherit}
a.tab{color:var(--text-2)}
a.tab[aria-selected="true"]{color:var(--text)}
a.mat-link{color:var(--text)}
a.mat-link:hover{border-color:var(--border-hi)}
.brand__word,.brand__sub,.who__n,.who__r{display:block}

/* The interface language, always in view at the left of the profile (decision 0070): the flag and code of
   the language in use, opening a short list of the two. The flags are the one place colour is not a status.
   Borderless, like the light and dark button beside it, and tinted under the pointer (decision 0117). */
.lang-menu{margin-left:auto;position:relative}
.lang-menu>summary{list-style:none}
.lang-menu>summary::-webkit-details-marker{display:none}
.lang-btn{display:flex;align-items:center;gap:7px;height:32px;padding:0 9px;border:0;
  border-radius:var(--r-sm);background:none;cursor:pointer;font-family:var(--ff-label);font-size:12px;
  font-weight:600;letter-spacing:.06em;color:var(--text-2)}
.lang-btn:hover{background:var(--surface-3);color:var(--text)}
.lang-menu[open]>.lang-btn{background:var(--accent-soft);color:var(--accent)}
.flag{display:block;flex:none;border-radius:2px;box-shadow:0 0 0 1px var(--border)}
.menu--lang{min-width:176px;padding:6px;gap:2px}
.menu__opt{display:flex;align-items:center;gap:10px;width:100%;padding:7px 9px;border:0;border-radius:var(--r-sm);
  background:none;font:inherit;font-size:14px;color:var(--text);cursor:pointer;text-align:left}
.menu__opt:hover{background:var(--surface-2)}
.menu__opt[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.lang-menu+.who-menu{margin-left:0}

/* The light and dark themes (decision 0116), at the left of the language button and drawn like it: a sun while the light
   theme is on and a moon while the dark one is, each switching to the other. Borderless, tinted under the pointer
   (decision 0117). */
.daynight{margin-left:auto;display:flex}
.daynight+.lang-menu{margin-left:-8px}
.daynight__btn{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;
  border-radius:var(--r-sm);background:none;color:var(--text-2);cursor:pointer}
.daynight__btn:hover{background:var(--surface-3);color:var(--text)}
/* Centred in its box, the icon sat higher than the language beside it, whose capitals ride below the middle of their
   line; a pixel down puts it level with the flag and code together. */
.daynight__btn svg{position:relative;top:1px}
.daynight__btn--dark,:root[data-theme="dark"] .daynight__btn--light{display:none}
:root[data-theme="dark"] .daynight__btn--dark{display:grid}

/* Profile menu and small pop-over forms */
.who-menu{margin-left:auto;position:relative}
.who-menu>summary,.inline-menu>summary{list-style:none}
.who-menu>summary::-webkit-details-marker,.inline-menu>summary::-webkit-details-marker{display:none}
.inline-menu{position:relative;display:inline-block}
/* Inside a table that scrolls sideways, a floating menu would be cut off by the scroll area, so it opens in its row */
.wrap-x .inline-menu[open]>.menu{position:static;margin-top:8px;box-shadow:none;text-align:left}
.menu{position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:240px;background:var(--surface);
  border:1px solid var(--border-hi);border-radius:var(--r);box-shadow:var(--shadow);padding:10px;
  display:flex;flex-direction:column;gap:8px}
.menu__label{font-family:var(--ff-label);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.menu .field{margin-bottom:0}
/* The signed-in person's own Microsoft photo in place of their initials, where they have one, and larger at the head of
   My Profile (decision 0126). */
.avatar--photo{object-fit:cover;background:var(--surface-3)}
.avatar--xl{width:80px;height:80px;font-size:26px}
.profile-card{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.profile-card__name{font-size:20px;font-weight:600;line-height:1.3}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Form controls, matching the preview's text input */
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select{font:inherit;font-size:14px;
  color:var(--text);background:var(--surface-2);border:1px solid var(--border-hi);border-radius:var(--r-sm);
  padding:8px 11px;outline:none;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field input[type=file]{font:inherit;font-size:12.5px;color:var(--text-2)}
.field__help{font-size:12.5px;color:var(--text-3);line-height:1.45}
.field__opt{font-weight:400;color:var(--text-3)}
.fieldset{border:0;padding:0;margin:0 0 14px;min-width:0}
.fieldset legend{font-size:13px;font-weight:600;color:var(--text-2);margin-bottom:6px;padding:0}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);margin:0 0 6px}
.check input{accent-color:var(--accent-fill);width:15px;height:15px;margin:0;flex:none}
.errorlist{list-style:none;margin:0;padding:0;color:var(--bad);font-size:13px}

/* A set of choices that comes from a database table is drawn as one bounded list, so that a
   control standing next to it is never read as one more value on it. Long lists scroll inside
   the box rather than pushing the rest of the form down. */
.optionlist{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);
  max-height:230px;overflow-y:auto}
.optionlist>.check,.optionlist__row{margin:0;padding:7px 12px;border-bottom:1px solid var(--border)}
.optionlist>.check:last-child,.optionlist__row:last-child{border-bottom:0}
.optionlist>.check:hover,.optionlist__row:hover{background:var(--surface)}
.optionlist__row{display:flex;align-items:center;gap:10px;font-size:14px;min-height:36px}
.optionlist__row form{margin-left:auto;display:flex}
.optionlist__empty{display:block;padding:9px 12px;font-size:12px;color:var(--text-3)}

/* A value an administrator keeps: its own name opens renaming and removing, inside the row, so a
   list of values stays a list and does not become a column of text boxes and buttons. */
.optionlist__item{border-bottom:1px solid var(--border)}
.optionlist__item:last-child{border-bottom:0}
.optionlist__item>summary{display:flex;align-items:center;gap:9px;min-height:36px;padding:7px 12px;
  font-size:14px;cursor:pointer;list-style:none}
.optionlist__item>summary::-webkit-details-marker{display:none}
.optionlist__item>summary::before{content:"";flex:none;width:5px;height:5px;margin:0 1px 0 2px;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(-45deg)}
.optionlist__item[open]>summary::before{transform:rotate(45deg);margin-top:-3px}
.optionlist__item>summary:hover{background:var(--surface)}
.optionlist__item[open]>summary{font-weight:600;background:var(--surface)}
.optionlist__item>summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.optionlist__edit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 12px 11px 28px;background:var(--surface)}
.optionlist__edit form{display:flex;align-items:center;gap:8px}
.optionlist__edit form:first-child{flex:1 1 240px}
.optionlist__edit input[type=text]{font:inherit;font-size:13px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border-hi);border-radius:var(--r-sm);padding:6px 9px;outline:none;flex:1 1 140px;min-width:0}
.optionlist__edit input[type=text]:focus{border-color:var(--accent)}
.check__help,.check__err{display:block;font-style:normal;font-size:11.5px;line-height:1.4;margin-top:2px}
.check__help{color:var(--text-3)}
.check__err{color:var(--bad)}

/* The departments a Training Manager manages only mean something while that role is held, so the
   list appears with the role rather than sitting beside the roles as though it were one of them. */
.roles__scope{margin-top:14px}
.roles:not(:has(input[name="is_training_manager"]:checked)) .roles__scope{display:none}

/* A choice between two ways of filling in the same form: the options are cards rather than bare
   radio buttons, and the half that does not apply is hidden rather than left there doing nothing.
   A hidden field still submits, so switching back and forth loses nothing. */
.switch{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.switch__opt{flex:1 1 210px;display:flex;align-items:flex-start;gap:9px;font-size:14px;padding:10px 12px;
  border:1px solid var(--border-hi);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.switch__opt input{accent-color:var(--accent-fill);width:15px;height:15px;margin:1px 0 0;flex:none}
.switch__opt:hover{border-color:var(--accent-line)}
.switch__opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}
.switch__opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
select.sel{font:inherit;font-size:12.5px}
.form-section{margin:18px 0 10px}
.form-section:first-of-type{margin-top:0}
.row--end{align-items:flex-end}
.row--end .field{margin-bottom:0;flex:0 1 280px}
.page--narrow{max-width:760px}

/* The way back from a page opened from a list (decision 0078), where the crumb would be: quiet, but a real target. */
.pagehead__back{display:inline-flex;align-items:center;gap:6px;margin:0 0 6px -6px;padding:3px 8px 3px 6px;
  border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--text-2);text-decoration:none}
.pagehead__back:hover{background:var(--surface-2);color:var(--accent)}
.pagehead__back:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* Messages above a screen. One that a page shows beside what it is about leaves nothing here (decision 0072). */
.messages{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.messages:not(:has(.note)){display:none}
/* A section a change returns to opens below the application bar, not underneath it. */
.panel[id]{scroll-margin-top:calc(var(--h-top) + 16px)}

/* A box that offers a list (decision 0076): the whole list when it opens, narrowed only once somebody types, with
   the value the box holds marked. Built by combobox.js from the box's datalist. */
.combo{position:relative}
.field .combo input.combo__input[type=text]{padding-right:36px}
.combo__toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;
  width:28px;height:28px;border:0;border-radius:var(--r-xs);background:none;color:var(--text-3);cursor:pointer}
.combo__toggle:hover{color:var(--text);background:var(--surface)}
.combo__list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;max-height:252px;overflow-y:auto;
  margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--border-hi);
  border-radius:var(--r-sm);box-shadow:var(--shadow)}
.combo__list[hidden]{display:none}
.combo__opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r-xs);font-size:14px;
  color:var(--text);cursor:pointer}
.combo__opt.is-active{background:var(--surface-2)}
.combo__opt[aria-selected="true"]{color:var(--accent);font-weight:600}
.combo__opt svg{margin-left:auto;flex:none}
.combo__empty{padding:8px 10px;font-size:12px;line-height:1.45;color:var(--text-3)}

/* The question a new job title asks (decision 0072): neutral, with the similar titles first and one button for each
   answer. Not a warning, because a new title is not a mistake. */
/* A question the form asks before it saves, such as whether a new job title joins the list. Amber, because it needs an
   answer before anything is saved, with a question mark rather than an alert, because nothing is wrong. */
.ask{margin:-4px 0 16px;padding:13px 15px;border:1px solid var(--warn-line);border-left:4px solid var(--warn-fill);
  border-radius:var(--r);background:var(--warn-soft)}
.ask__q{display:flex;align-items:flex-start;gap:8px;font-size:14.5px;font-weight:650;color:var(--text);margin:0 0 4px}
.ask__q svg{flex:none;margin-top:2px;color:var(--warn)}
.ask__hint{font-size:13px;color:var(--text);line-height:1.45;margin:8px 0 6px}
.ask__opts{display:flex;flex-wrap:wrap;gap:6px}

/* Roles ticked on the Users and Roles list, and the bar that saves them once something has changed (decision 0072).
   The bar floats at the foot of the window so it can be reached from anywhere in a long list. */
.role-check{accent-color:var(--accent-fill);width:16px;height:16px;margin:0;cursor:pointer;vertical-align:middle}
.role-check:disabled{cursor:not-allowed;opacity:.55}
.role-fixed{display:inline-flex;color:var(--text-3)}
.savebar{position:fixed;right:28px;bottom:24px;z-index:35;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;
  background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r);box-shadow:var(--shadow)}
.savebar[hidden]{display:none}
.savebar__count{font-size:14px;font-weight:600;color:var(--text);margin-right:6px}

/* A filter bar's own search box, which sits in the row rather than being pushed to the right edge
   the way the design's page-level search is (decision 0067). */
.search--inline{margin:0;min-width:210px;max-width:280px;flex:1 1 210px}
.filters .search--inline input{min-width:0}

/* The row just moved up or down a list, marked for a moment so the eye can follow it (decision 0080). */
.is-moved{animation:moved 1.8s ease-out}
@keyframes moved{from{background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent-line)}to{background:transparent;box-shadow:none}}
@media (prefers-reduced-motion:reduce){.is-moved{animation:none;background:var(--accent-soft)}}

/* The module editor's list */
/* Moving a row up or down its list: two buttons, one above the other, drawn as buttons so they read as something
   to press */
.mover{position:relative;z-index:1;display:flex;flex-direction:column;flex:none;gap:2px}
.mover__btn{display:grid;place-items:center;width:30px;height:21px;padding:0;border:1px solid var(--border-hi);
  border-radius:5px;background:var(--surface);color:var(--text-2);cursor:pointer}
.mover__btn:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.mover__btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.editor-sec{margin:10px 0 2px}
.editor-sec form{display:flex}
/* An editor's row is the link to what it names, as a learner's row is (decision 0089): its title's link covers it, and
   the moves, language chips and removal sit above that link */
.editrow{position:relative}
.editrow .mat-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.editrow .mat-link:focus-visible{outline:0}
.editrow:has(.mat-link:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.editrow>form,.editrow>.spread,.editrow .chip{position:relative;z-index:1}
.mat.editrow:hover{border-color:var(--border-hi);background:var(--surface-2)}
.editor-sec.editrow{padding:4px 6px;border-radius:var(--r-sm)}
.editor-sec.editrow:hover{background:var(--surface-2)}
.editor-sec .mat-link{color:inherit}
.editrow__hint{pointer-events:none}

/* Learner reading view */
.side{display:flex;flex-direction:column;gap:16px}
.media-frame{margin:18px 0;max-width:760px}
.media{display:block;max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
video.media{width:100%}
/* A YouTube video (decision 0093), at the shape YouTube draws it */
.ytframe iframe{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--border);border-radius:var(--r);background:#000}

/* The standing reminder about patient information (decisions 0069 and 0071). Quiet on purpose: it is information,
   not an alert, so it has no colour of its own and no box around it. It sits at the foot of the rail, in view on
   every page; where the rail folds into a bar above the page, the copy after the page is shown instead. */
.footnote{display:flex;align-items:flex-start;gap:7px;margin:0;color:var(--text-3);font-size:12.5px;line-height:1.5}
.footnote svg{flex:none;margin-top:2px}
.rail__foot{padding:14px 18px 4px}
.rail__foot .footnote{color:var(--rail-dim);font-size:11.5px}
.page-foot{display:none}
@media (max-width:1080px){
  .page-foot{display:block;max-width:1720px;width:100%;padding:0 28px 28px;margin-inline:auto}
  .page-foot .footnote{padding-top:12px;border-top:1px solid var(--border)}
}

/* The player for a video the learner has not finished (decision 0060): its bar shows the watched parts, and only
   those can be moved within. Shown by the video tracker; the browser's own controls are used otherwise. */
.player:has(.player__bar:not([hidden])) video.media{border-bottom:0;border-radius:var(--r) var(--r) 0 0;cursor:pointer}
.player__bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--surface);
  border:1px solid var(--border);border-radius:0 0 var(--r) var(--r)}
.player__btn{flex:none;padding:5px 7px}
.player__track{position:relative;flex:1;min-width:60px;height:8px;margin:0 8px;border-radius:999px;
  background:var(--surface-3);cursor:pointer;touch-action:none}
.player__track:focus-visible{outline:2px solid var(--focus);outline-offset:5px}
.player__track [data-player-watched] span{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--accent-fill)}
.player__head{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);pointer-events:none}
.player__time{flex:none;font-size:12px;color:var(--text-2);white-space:nowrap}
.player__volume{flex:none;width:84px;margin:0 4px 0 -2px;accent-color:var(--accent-fill);cursor:pointer}
@media (max-width:640px){
  .player__bar{flex-wrap:wrap}
  .player__track{order:-1;flex-basis:100%;margin:8px 7px 4px}
  .player__time{margin-right:auto}
}
.player:fullscreen{display:flex;flex-direction:column;justify-content:center;max-width:none;margin:0;background:var(--surface)}
.player:fullscreen video.media{flex:1;min-height:0;border:0;border-radius:0}
.player:fullscreen .player__bar{border-radius:0;border-left:0;border-right:0;border-bottom:0}
img.splash__art{object-fit:cover}
.break{overflow-wrap:anywhere}

/* Adding stays out of the way until somebody asks for it (decision 0083).
   A reveal: one "+ Add" button where the list ends, which opens the controls for the new value in the same place,
   with Save and Cancel. It is a <details>, so it opens without the script; with it, the button steps aside while
   the controls are open, Cancel and Escape close them, and the cursor goes to the first box. */
.reveal>summary{list-style:none;display:inline-flex}
.reveal>summary::-webkit-details-marker{display:none}
.js .reveal[open]>summary{display:none}
.reveal__form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;padding:12px;border:1px solid var(--accent-line);
  border-radius:var(--r);background:var(--surface-2)}
.reveal__form .field{margin:0;flex:1 1 220px}
.reveal__form .field--narrow{flex:0 1 170px}
.reveal__form .reveal__actions{display:flex;gap:8px;flex:none}
.reveal__form .errorlist{flex-basis:100%}
.reveal+.reveal,.irows+.reveal,.optionlist+.reveal,.mats+.reveal{margin-top:12px}
/* A row that opens to show what it holds keeps its arrow only where a script can work it (decision 0088). */
html:not(.js) .onode__toggle{visibility:hidden}
/* ---------- an audience's page (decision 0084) ----------
   The rules as boxes joined by "or", each a row of conditions joined by "and"; who is in it beside them. */
.aed{display:flex;flex-direction:column;gap:18px}
.aed .tabs{margin-bottom:0}
.aed__name{display:flex;flex-wrap:wrap;gap:14px}
.aed__name .field{flex:1 1 260px;margin:0}
.aed__name .aed__desc{flex:2 1 380px}
.aed__members{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start}
@media (max-width:1180px){.aed__members{grid-template-columns:minmax(0,1fr)}}
.arules{display:flex;flex-direction:column;gap:44px;counter-reset:rule}
.arule{position:relative;padding:14px 18px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 1px 3px rgba(24,44,60,.07)}
.arule:not(.arule--people){counter-increment:rule}
.arule__num::after{content:counter(rule)}
/* "or" between one box and the next, where the eye goes from one to the other */
.arule+.arule::before{content:attr(data-or);position:absolute;left:20px;top:-33px;padding:2px 12px;border-radius:999px;
  background:var(--ink);color:var(--on-ink);font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.arule__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.arule__head h3{font-family:var(--ff-display);font-size:16.5px}
.arule__count{padding:1px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2);font-size:13px;color:var(--text-2)}
.arule__conds{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:10px}
.acond{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.acond__label{padding:7px 11px;border-bottom:1px solid var(--border);font-size:13.5px;font-weight:650;color:var(--text)}
.acond__and{font-weight:500;color:var(--text-3)}
.acond__values{display:flex;flex-direction:column;gap:4px;min-height:40px;padding:6px}
.acond__any{padding:4px 6px;font-size:14px;color:var(--text-3)}
.aval,.aperson{position:relative;display:flex;align-items:center;gap:8px;padding:5px 9px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface);font-size:14px;cursor:pointer}
.aval input,.aperson input{accent-color:var(--accent-fill);margin:0}
.js .aval input,.js .aperson input{position:absolute;opacity:0;pointer-events:none}
.aval__x{display:none;margin-left:auto;color:var(--text-3)}
.js .aval__x{display:inline-flex}
.js .aval:hover,.js .aperson:hover{border-color:var(--bad-line)}
.js .aval:hover .aval__x,.js .aperson:hover .aval__x{color:var(--bad)}
.aval:has(input:focus-visible),.aperson:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
.acond__add{padding:0 6px 6px}
.acond__plus{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--r-sm);color:var(--accent);
  font-size:13.5px;font-weight:600;cursor:pointer}
.acond__plus:hover{background:var(--accent-soft)}
.acond .reveal__form{flex-direction:column;align-items:stretch;padding:8px}
.acond .reveal__form select,.arule--people .reveal__form select{font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--border-hi);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text);width:100%}
.apeople{display:flex;flex-direction:column;gap:5px;margin-bottom:8px}
.aperson .avatar{width:26px;height:26px;font-size:10.5px}
.aperson em,.amember em{margin-left:8px;font-style:normal;font-size:12.5px;color:var(--text-3)}
.amembers{position:sticky;top:16px}
.amembers__search{max-width:none;margin-bottom:10px}
.amembers__change{display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 8px;font-size:13.5px}
.amembers__list{display:flex;flex-direction:column;max-height:62vh;overflow-y:auto}
.amember{display:flex;align-items:center;gap:9px;padding:6px 4px;border-bottom:1px solid var(--border);font-size:14px}
.amember:last-child{border-bottom:0}
.amember .avatar{width:24px;height:24px;font-size:10px}
.amember__tag{margin-left:auto;font-size:12px;font-weight:700}
.amember--joins .amember__tag{color:var(--ok)}
.amember--leaves .amember__n{text-decoration:line-through;color:var(--text-3)}
.amember--leaves .amember__tag{color:var(--bad)}
/* A choice of two, such as whether training is available or required */
.seg2{display:inline-flex;border:1px solid var(--border-hi);border-radius:var(--r-sm);overflow:hidden}
.seg2 label{position:relative;display:inline-flex;align-items:center;padding:4px 11px;background:var(--surface);font-size:13px;cursor:pointer}
.seg2 label+label{border-left:1px solid var(--border-hi)}
.seg2 input{position:absolute;opacity:0;pointer-events:none}
.seg2 label:has(input:checked){background:var(--ink);color:var(--on-ink);font-weight:600}
.seg2 label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:-2px}

/* An editor's heading carries the item's state and the actions on it beside its title (decision 0091) */
.pagehead__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}

/* An item's details, across the editor above its contents (decision 0091): the card, the title and description,
   the settings, and the tags across the foot. It narrows to two columns, then to one. */
.details{display:grid;grid-template-columns:250px minmax(0,1.5fr) minmax(260px,1fr);grid-template-areas:"pic main side" "pic tags side";
  gap:0 26px;align-items:start}
.details__pic{grid-area:pic}
.details__main{grid-area:main}
.details__side{grid-area:side;padding-top:2px}
.details__tags{grid-area:tags}
.details__tags .field{margin-bottom:0}
/* A Training Manager reviewing shared training reads the details laid out as the form is (decision 0099). */
.readfield{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.readfield__label{font-size:13px;font-weight:600;color:var(--text-2)}
.readfield__value{font-size:15px;color:var(--text);line-height:1.5}
.details .kv{margin:0}
@media (max-width:1080px){
  .details{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"pic main" "pic tags" "pic side"}
  .details__tags{margin-bottom:14px}
}
@media (max-width:680px){
  .details{grid-template-columns:minmax(0,1fr);grid-template-areas:"pic" "main" "tags" "side"}
  .details__pic{max-width:300px;margin-bottom:16px}
}
/* Two panels side by side that fall one under the other when there is no room, such as managers and sharing */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:22px;align-items:start}

/* Tags to tick, drawn as the pills that filter by them (decision 0087) */
.tagpicks .pill{position:relative}
.tagpicks .pill input{position:absolute;opacity:0;pointer-events:none}
.tagpicks .pill svg{display:none}
.tagpicks .pill:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.tagpicks .pill:has(input:checked) svg{display:inline}
.tagpicks .pill:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
/* Decision 0109: a new tag is added from the end of the list, and shows ticked, with a button to take it off again. */
.tagpicks .pill--add{border-style:dashed;color:var(--text-2);font:inherit;font-size:13px}
.tagpicks .pill--add svg,.tagpicks .pill--new svg{display:inline}
.tagpicks .pill--add:hover{border-color:var(--accent-fill);color:var(--accent)}
.tagpicks .pill--input{width:160px;font:inherit;font-size:13px;cursor:text;border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill);outline:none}
.tagpicks .pill--new{background:var(--ink);border-color:var(--ink);color:var(--on-ink);cursor:default;padding-right:8px}
.pill__x{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:1px;padding:0;border:0;border-radius:50%;
  background:none;color:inherit;opacity:.75;cursor:pointer}
.pill__x:hover{opacity:1;background:rgba(255,255,255,.18)}
/* A field's label may carry an icon of what it asks for, such as the clock for an estimated time (decision 0109). */
.field__icon{vertical-align:-3px;margin-right:5px;color:var(--text-3)}

/* The certificate design an item chooses (decision 0109): a pane with the design as the item's certificate, which opens
   the designs to choose from, all drawn the same way. It is hidden while completing the item issues no certificate. */
form:has(input[name="issues_certificate"]:not(:checked)) .certpick{display:none}
.certpick__label{font-size:13px;font-weight:600;color:var(--text-2)}
.certpick__pane{display:flex;align-items:center;gap:14px;width:100%;max-width:440px;padding:10px 14px 10px 10px;border:1px solid var(--border-hi);
  border-radius:var(--r);background:var(--surface);font:inherit;color:var(--text);text-align:left;cursor:pointer;
  transition:border-color .15s,box-shadow .15s}
.certpick__pane:hover{border-color:var(--accent-fill);box-shadow:0 2px 12px rgba(0,109,90,.12)}
.certpick__pane:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.certpick__sheet{flex:0 0 150px;pointer-events:none}
.certpick__sheet .certx{box-shadow:0 1px 3px rgba(15,30,40,.12)}
.certpick__text{display:flex;flex-direction:column;gap:6px;min-width:0}
.certpick__name{font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.certpick__change{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent)}
.certpick__pane:hover .certpick__change{text-decoration:underline}
.certpick{container-type:inline-size}
@container (max-width:330px){
  .certpick__pane{flex-direction:column;align-items:stretch;gap:10px;padding:10px}
  .certpick__sheet{flex:none}
}
dialog.dlg.dlg--designs{width:min(1180px,calc(100% - 32px))}
.dlg--designs .dlg__body{max-height:min(68vh,760px);overflow-y:auto}
.designpicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:2px}
.designpick{position:relative;display:flex;flex-direction:column;gap:9px;padding:10px;border:1px solid var(--border-hi);border-radius:var(--r);
  background:var(--surface);cursor:pointer}
.designpick input{position:absolute;opacity:0;pointer-events:none}
.designpick:hover{border-color:var(--text-3)}
.designpick:has(input:checked){border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill);background:var(--accent-soft)}
.designpick:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.designpick__sheet{display:block;pointer-events:none}
.designpick__foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.designpick__name{font-size:14px;font-weight:600}
.designpick__check{flex:none;color:var(--accent-fill);visibility:hidden}
.designpick:has(input:checked) .designpick__check{visibility:visible}

/* The card in an editor's details is the button to the picture page (decision 0091). Its cue is always shown and
   grows when pointed at; its words show then too. */
.picbtn{position:relative;display:block;border-radius:var(--r-lg);color:inherit;text-decoration:none}
.picbtn .icard,.picbtn .icard__chips>*{pointer-events:none}
.picbtn:hover .icard{border-color:var(--lv);box-shadow:0 0 0 1px var(--lv)}
.picbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.picbtn__cue{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  gap:7px;pointer-events:none}
.picbtn__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.95);color:#22313C;
  box-shadow:0 2px 8px rgba(0,0,0,.2);transition:transform .15s ease}
.picbtn__label{padding:2px 10px;border-radius:999px;background:rgba(255,255,255,.95);color:#22313C;font-size:12.5px;font-weight:600;
  white-space:nowrap;opacity:0;transition:opacity .15s ease}
.picbtn:hover .picbtn__ico,.picbtn:focus-visible .picbtn__ico{transform:scale(1.22)}
.picbtn:hover .picbtn__label,.picbtn:focus-visible .picbtn__label{opacity:1}

/* The picture page (decision 0091): a wide box to choose the picture in across the top, then the preview at the sizes a
   learner sees it: the top of the item's page across the page, then the card, as wide as one of four in a row, beside
   the list card. */
.picpage{display:flex;flex-direction:column;gap:18px}
.picchoose{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.picchoose .dropzone{flex:1 1 420px}
.picchoose__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.picchoose__errors{padding:0 20px}
.picchoose__note{padding:0 20px 4px}
.picpage .section-title{margin-top:8px}
.picprev{display:flex;flex-direction:column;gap:9px;min-width:0}
.picprev__row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:22px}
.picprev--card{flex:0 0 284px;max-width:100%}
.picprev--list{flex:1 1 360px}

/* A box to choose a file in or drop one on (decision 0091). The file box itself covers it, unseen, so a click or a
   dropped file reaches it without any script. */
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:170px;
  padding:22px 16px;border:2px dashed var(--border-hi);border-radius:var(--r-lg);background:var(--surface-2);text-align:center;cursor:pointer}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropzone:hover,.dropzone.is-over{border-color:var(--accent);background:var(--accent-soft)}
.dropzone:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.dropzone__ico{display:grid;place-items:center;flex:none;width:54px;height:54px;margin-bottom:7px;border-radius:50%;background:var(--surface);
  color:var(--accent);box-shadow:0 1px 3px rgba(24,44,60,.14);transition:transform .15s ease}
.dropzone:hover .dropzone__ico,.dropzone.is-over .dropzone__ico{transform:scale(1.18)}
.field .dropzone{font-size:14px;font-weight:400;color:var(--text)}
.dropzone__t{font-weight:600;color:var(--text)}
.dropzone__m{font-size:13px;color:var(--text-2)}
.dropzone__file{margin-top:4px;font-size:13px;font-weight:600;color:var(--accent);word-break:break-all}
/* The wide box: its glyph at the left and its words beside it */
.dropzone--wide{flex-direction:row;justify-content:flex-start;gap:16px;min-height:96px;padding:16px 20px;text-align:left}
.dropzone--wide .dropzone__ico{margin:0}
.dropzone__words{display:flex;flex-direction:column;gap:2px;min-width:0}
.dropzone--wide .dropzone__file{margin-top:2px}
.dropzone__file:empty{display:none}
/* Under a file already there, or one just chosen, the box is a strip: the file shows above it as the learner sees it */
.dropzone--slim,:is(.matedit,.langpane).is-picked .dropzone{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px 12px;min-height:0;
  padding:11px 14px;text-align:left}
.dropzone--slim .dropzone__ico,:is(.matedit,.langpane).is-picked .dropzone__ico{width:38px;height:38px;margin:0}
.dropzone--slim .dropzone__file,:is(.matedit,.langpane).is-picked .dropzone__file{margin:0;flex-basis:100%;padding-left:50px}

/* A material edited in the shape a learner sees it in (decision 0092) */
.matedit__main{min-width:0}
.field--title input{font-family:var(--ff-display);font-size:21px!important;font-weight:650;padding:10px 12px!important}
.matedit .media-frame{margin:0 0 12px}
.matedit .mat.media-frame{background:var(--surface)}
/* A picture already there is itself the way to replace it: the same cue as the card's picture button */
.mpic{position:relative;display:block;width:fit-content;max-width:100%;cursor:pointer;border-radius:var(--r)}
.mpic .picbtn__cue{top:50%}
.mpic:hover .picbtn__ico{transform:scale(1.22)}
.mpic:hover .picbtn__label,.mpic.is-over .picbtn__label{opacity:1}
.mpic:hover .media,.mpic.is-over .media{border-color:var(--accent)}
.media-frame.is-over,.mat.is-over{outline:2px dashed var(--accent);outline-offset:3px}
/* A video from an upload or from YouTube (decision 0093): the way not chosen steps out of sight */
.vsource{margin-bottom:12px}
.seg2--lg{align-self:flex-start;width:fit-content}
.seg2--lg label{padding:8px 16px;font-size:14px}
[data-source-scope]:has(input[name$="video_source"][value="youtube"]:checked) [data-source-panel="file"],
[data-source-scope]:has(input[name$="video_source"][value="file"]:checked) [data-source-panel="youtube"]{display:none}
/* A link's address, written where the learner will see the link */
.linkbox{padding:6px 8px 6px 13px;background:var(--surface)}
.linkbox input{flex:1;min-width:0;border:0!important;background:transparent!important;padding:6px 4px!important}
.linkbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
@media (prefers-reduced-motion:reduce){.picbtn__ico,.picbtn__label,.dropzone__ico{transition:none}}
/* A dialog: a short form that does something to a record, with Cancel always beside the action (decision 0083).
   The native element, so focus stays inside it while open and Escape closes it. */
dialog.dlg{width:min(500px,calc(100% - 32px));padding:0;border:1px solid var(--border-hi);border-radius:var(--r-lg);
  background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
dialog.dlg::backdrop{background:rgba(9,22,30,.45)}
.dlg__head{display:flex;align-items:flex-start;gap:12px;padding:18px 22px 4px}
.dlg__head h2{font-family:var(--ff-display);font-size:19px;line-height:1.3}
.dlg__sub{font-size:13.5px;color:var(--text-2);margin-top:3px}
.dlg__body{padding:14px 22px 6px}
.dlg__body .field:last-child{margin-bottom:8px}
.dlg__foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 22px 18px}
.dlg__note{font-size:13px;color:var(--text-2);line-height:1.45;margin:4px 0 8px}

/* Confirming a change before it is saved (decisions 0055 and 0094): the page says first that nothing is saved yet, and
   its Save stays at the foot of the window however long the lists are. In a dialog over the page that asked, the same
   lists scroll inside it. */
.confirm__lead{font-size:14.5px}
.confirm__bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--r);box-shadow:var(--shadow)}
dialog.dlg--wide{width:min(860px,calc(100% - 32px))}
.dlg--wide .dlg__body{max-height:min(62vh,640px);overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.dlg--wide .dlg__body .panel{box-shadow:none}

/* Hidden until a script reveals it, whatever display its classes give it */
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.chip{text-decoration:none}

/* Content written in more than one language (decision 0038): the language being written in, with its flag, as large
   tabs. The one being written in is filled; one not written yet is dashed. */
.langtabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.langtabs .eyebrow{margin-right:4px}
.langtab{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 16px;border:1px solid var(--border-hi);
  border-radius:var(--r);background:var(--surface);color:var(--text);font-size:15px;font-weight:600;text-decoration:none}
.langtab .flag{flex:none;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.langtab:hover{border-color:var(--text-3)}
.langtab--missing{border-style:dashed;color:var(--text-2)}
.langtab__missing{font-size:12.5px;font-weight:400;color:var(--text-3)}
.langtab[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.langtab[aria-current="true"] .langtab__missing{color:var(--on-ink);opacity:.75}
.langtab:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* A picture its author offers to print, with its Print button under it (decision 0118) */
.matview__print{display:flex;justify-content:flex-end;margin:-4px 0 14px}
/* On a new material's page the tabs switch between panes of one form (decision 0118) */
button.langtab{font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.langtab:not(.langtab--missing) .langtab__missing{display:none}
.langpane__name{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:15px}
.langpane__name .flag{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.js .langpane__name{display:none}
:root:not(.js) .langpane+.langpane{margin-top:24px}
/* A new Section heading in both languages, each box beside its flag (decision 0118) */
.seclangs{display:flex;flex-direction:column;gap:4px}
.seclangs label{display:flex;align-items:center;gap:8px}
.seclangs .flag{border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14)}

/* Rich text as a learner reads it, including what the editor can produce (decision 0033) */
.prose h2{font-family:var(--ff-display);font-size:22px;margin:26px 0 8px}
.prose h4{font-family:var(--ff-display);font-size:16.5px;margin:22px 0 6px}
.prose ol{margin:0 0 14px;padding-left:22px}
.prose a{color:var(--accent)}
.prose img{max-width:100%;height:auto;border:1px solid var(--border);border-radius:var(--r)}
.tox.tox-tinymce{border:1px solid var(--border-hi);border-radius:var(--r-sm)}

/* Question authoring */
.answers{display:flex;flex-direction:column;gap:8px}
.answer-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.answer-row .field{margin:0}
.answer-row__correct{display:flex;align-items:center;gap:6px;cursor:pointer}
.answer-row__correct input{accent-color:var(--ok-fill);width:15px;height:15px;margin:0}
.answer-row__correct input:checked+.opt__k{background:var(--ok-fill);border-color:var(--ok-fill);color:var(--text)}
.answer-row__remove{margin:0}
img.question-image{max-height:240px;width:auto}

/* Taking a test: the design's answer options as real radio buttons */
label.opt{position:relative}
label.opt input{position:absolute;opacity:0;pointer-events:none}
label.opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
/* Text colour as .opt--pick in design/wikimas.css */
label.opt:has(input:checked) .opt__k{background:var(--accent);border-color:var(--accent);color:#fff}
label.opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
/* A multiple-choice question's letters are square, as checkboxes are (decision 0040) */
label.opt:has(input[type=checkbox]) .opt__k{border-radius:5px}
div.opt{cursor:default}
.q__image{margin:0 0 16px}
.score{font-family:var(--ff-display);font-size:40px;font-weight:600;line-height:1;letter-spacing:-.02em}

/* First sign-in: choosing a language (decision 0044) */
.lang-choice{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:color-mix(in srgb,var(--text) 38%,transparent)}
.lang-choice>.panel{width:min(540px,100%);box-shadow:var(--shadow)}

/* Sign-in and error pages */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px}
.signin>.panel{width:min(460px,100%)}
.signin__body{display:flex;flex-direction:column;gap:14px}
.signin__title{font-size:20px;font-family:var(--ff-display)}
.signin__action{justify-content:center}

/* A note that reports something being taken away, in the same shape as note--warn */
.note--bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}

/* Certificates, audiences and the confirmation page: links that sit inside existing components */
.tnode__t a,.entry__t a{color:inherit;text-decoration:none}
.tnode__t a:hover,.entry__t a:hover{text-decoration:underline}

/* The record itself is the link. A table wide enough to scroll sideways would otherwise carry its
   only action in the last column, where the container hides it. */
a.who-cell{text-decoration:none;color:inherit;padding:3px 5px;margin:-3px -5px;border-radius:var(--r-sm)}
a.who-cell .who-cell__n{font-weight:500}
a.who-cell:hover .who-cell__n{color:var(--accent);text-decoration:underline}
a.who-cell:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* Printing a page: the application's frame steps out of the way. A material prints as its title, its picture and its
   notes, which is how a quick reference that is a picture is printed (decision 0110). A certificate prints from its own
   PDF file (decision 0107), not from the page. */
@media print {
  .appbar, .rail, .page-foot, .messages, .trail { display: none }
  .shell, .main, .page { display: block; padding: 0; margin: 0; max-width: none }
  .matview { display: block }
  .matview > .side, .matview__top, .matview__hint, .matview__print, .matview .note, .filebar, .pagebar { display: none }
  .matview .media-frame { border: 0; box-shadow: none; background: none }
}
/* What a material carries (decision 0110): a sound file plays in the page, and a file's actions sit together at the end
   of its row. The frame a quick reference is printed from is out of sight, but drawn, so the browser prints it. */
.audio{display:block;width:100%;margin-bottom:14px;padding:10px}
.filebar{flex-wrap:wrap}
.filebar__actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.printframe{position:fixed;right:0;bottom:0;width:1px;height:1px;border:0;opacity:0;pointer-events:none}

/* Decision 0111: the buttons that move between materials stay at the foot of the window, in the material's column, so
   Previous and Next never move. The page is always at least as tall as the window, so the bar's own place is never above
   its foot. That the material is complete is said beside where it is in the module; in a list, a finished line keeps its
   type's icon and shows its check at its end. */
.main{min-height:calc(100vh - var(--h-harness) - var(--h-top))}
.pagebar{position:sticky;bottom:0;z-index:25;margin-top:auto;pointer-events:none}
.pagebar__in{max-width:1720px;margin-inline:auto;padding:0 28px 14px;display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:22px}
.pagebar__bar{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;background:var(--surface);
  border:1px solid var(--border-hi);border-radius:var(--r-lg);box-shadow:0 -4px 18px rgba(15,30,40,.08),0 1px 2px rgba(15,30,40,.06)}
.pagebar__hint{margin-left:auto;max-width:62ch;font-size:12.5px;line-height:1.4;color:var(--text-2);text-align:right}
.pagebar__go{margin-left:auto}
.pagebar__hint + .pagebar__go{margin-left:0}
@media (max-width:1080px){.pagebar__in{grid-template-columns:minmax(0,1fr);padding:0 14px 10px}}
.matview__where{gap:14px;align-items:center}
.donecue{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--ok)}
.mat__done{flex:none;margin-left:auto;color:var(--ok)}

/* Decision 0112: Progress Reports' filters stand one above the other, each named by its icon and its word. The training
   is a pane with its picture, which opens the training to choose from as list rows; a department and a location are
   pills. The tiles are the buttons that show one status, the one chosen marked by a line along its foot. */
.rfilters{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.rfilter{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap}
.rfilter__label{flex:0 0 118px;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-2)}
.rfilter__label svg{flex:none;color:var(--text-3)}
.rfilter .pills{flex:1;min-width:0}
.tpick{display:flex;align-items:center;gap:12px;width:min(560px,100%);padding:6px 14px 6px 6px;border:1px solid var(--border-hi);
  border-radius:var(--r);background:var(--surface);font:inherit;color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tpick:hover{border-color:var(--accent-fill);box-shadow:0 2px 12px rgba(0,109,90,.12)}
.tpick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tpick__text{flex:1;min-width:0;display:flex;flex-direction:column}
.tpick__t{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tpick__m{font-size:12.5px;color:var(--text-2)}
.tpick__change{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--accent)}
.tpick:hover .tpick__change{text-decoration:underline}
/* All training (decision 0138): the three level glyphs side by side, each in its colour, on their three tints */
.art--all{display:flex;align-items:center;justify-content:center;gap:5px;
  background:linear-gradient(100deg,var(--lv-path-soft),var(--lv-course-soft) 50%,var(--lv-module-soft))}
.art--all::before{display:none}
.art.art--all svg{position:static;transform:none;width:16px;height:16px;max-height:none;opacity:1;color:var(--lv)}
.irow--all::before{background:linear-gradient(var(--lv-path),var(--lv-course),var(--lv-module))}
a.irow{color:inherit;text-decoration:none}
.irow--pick:hover{background:var(--surface-2);border-color:var(--border-hi)}
.irow--pick[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent-line)}
.irow--pick:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.irow__chosen{flex:none;margin-left:auto;color:var(--accent-fill)}
.irow--pick .irow__t,.irow--pick .irow__m{display:block}
.stats--pick{grid-template-columns:repeat(6,minmax(0,1fr));border-bottom:1px solid var(--border)}
a.stat{display:block;color:inherit;text-decoration:none;transition:background .15s}
a.stat .stat__n,a.stat .stat__l{display:block}
a.stat:hover{background:var(--surface-2)}
a.stat[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 0 -3px 0 var(--accent-fill)}
a.stat:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media (max-width:900px){.stats--pick{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Decision 0113: the week Progress Reports looks at, chosen at the top right: this week, all time, or a week picked, with
   its dates beneath. Clear filters stands out beside the search box. Decision 0114: a week is picked from WikiMas's own
   calendar, weeks starting on Monday, in the site's colors: a week is a row, tinted when pointed at and filled with the
   accent when chosen, and this week is outlined. */
.period{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.period__switch{display:inline-flex;align-items:stretch;border:1px solid var(--border-hi);border-radius:var(--r-sm);background:var(--surface)}
.period__switch>:first-child,.period__switch>:first-child .period__opt{border-radius:5px 0 0 5px}
.period__switch>:last-child,.period__switch>:last-child .period__opt{border-radius:0 5px 5px 0;border-right:0}
.period__opt{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;font-size:13.5px;color:var(--text-2);text-decoration:none;
  border-right:1px solid var(--border);cursor:pointer}
.period__opt:hover{background:var(--surface-2);color:var(--text)}
.period__opt[aria-current="true"]{background:var(--ink);color:var(--on-ink);font-weight:600}
.period__dates{font-size:12.5px;color:var(--text-2)}
.weekpick{position:relative;display:flex}
.weekpick>summary{list-style:none}
.weekpick>summary::-webkit-details-marker{display:none}
.weekpick[open]>summary:not([aria-current="true"]){background:var(--accent-soft);color:var(--accent)}
.weekpick__menu{min-width:0;width:max-content;padding:12px 12px 10px}
.weekpick__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.weekpick__title{font-size:14.5px;font-weight:600;color:var(--text)}
.weekpick__nav{display:inline-grid;place-items:center;width:30px;height:30px;border:0;border-radius:var(--r-sm);background:none;color:var(--text-2);cursor:pointer}
.weekpick__nav:hover{background:var(--accent-soft);color:var(--accent)}
.weekpick__nav[data-step="-1"] svg{transform:scaleX(-1)}
.weekpick__nav:focus-visible,.weekpick__row:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.weekpick__grid{display:flex;flex-direction:column;gap:3px}
.weekpick__row{display:grid;grid-template-columns:36px repeat(7,34px);align-items:center;height:34px;border-radius:999px;
  color:var(--text);font-size:13.5px;text-align:center;text-decoration:none;font-variant-numeric:tabular-nums}
.weekpick__row--head{height:26px;color:var(--text-3);font-size:11.5px;font-weight:600}
a.weekpick__row:hover{background:var(--accent-soft);color:var(--accent)}
.weekpick__row.is-now{box-shadow:inset 0 0 0 1.5px var(--accent-line)}
.weekpick__row[aria-current="true"],a.weekpick__row[aria-current="true"]:hover{background:var(--accent);color:var(--surface);font-weight:600}
.weekpick__wk{font-size:11.5px;color:var(--text-3)}
.weekpick__row[aria-current="true"] .weekpick__wk{color:inherit;opacity:.8}
.weekpick__d.is-out{color:var(--text-3)}
.weekpick__row[aria-current="true"] .weekpick__d.is-out{color:inherit;opacity:.7}
.weekpick__d.is-today{position:relative;font-weight:700}
.weekpick__d.is-today::after{content:"";position:absolute;left:50%;bottom:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.weekpick__fallback{display:flex;gap:8px;align-items:center}
.btn--clear{margin-left:auto;background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600}
.btn--clear:hover{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-ink)}
/* Decision 0114: what storage holds, on Audit's second tab. Each piece of training ends with a bar of its share of the
   largest and its size. */
.storage__head{display:flex;align-items:baseline;gap:12px;margin:26px 2px 10px}
.storage__kinds{display:flex;flex-wrap:wrap;gap:8px 26px;padding:12px 20px;border-top:1px solid var(--border);font-size:13.5px}
.storage__retired{margin-left:auto}
.storage__head h2{font-size:17px;font-family:var(--ff-display)}
.usage{display:inline-flex;align-items:center;gap:10px}
.usage__bar{display:block;width:120px;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.usage__bar>span{display:block;height:100%;border-radius:999px;background:var(--accent-fill)}
.usage__n{min-width:72px;text-align:right;font-size:14px;color:var(--text)}
/* The employees an item is assigned to, on its Access tab: ten show, and a longer list scrolls inside its box, so the
   rows under it stay near (decision 0112). */
.aclist--scroll{max-height:calc(10 * 51px + 2px);overflow-y:auto}

/* Decision 0101: a page with nothing to show says so plainly, in the middle of its space, without a colour that reads as
   good news. */
.emptystate{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;
  padding:56px 24px;border:1px dashed var(--border);border-radius:var(--r);background:var(--surface);color:var(--text-2)}
.emptystate__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--surface-3);
  color:var(--text-3);margin-bottom:6px}
.emptystate__t{margin:0;font-size:16px;font-weight:600;color:var(--text)}
.emptystate__m{margin:0;max-width:52ch;font-size:14px;color:var(--text-2)}

/* The certificate list: each line a link from edge to edge, its date on a line of its own (decision 0101). */
a.certrow{color:inherit;text-decoration:none;align-items:flex-start}
a.certrow:hover{background:var(--surface-2)}
a.certrow:hover .certrow__t{text-decoration:underline}
a.certrow[aria-current="true"]{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent-fill)}
a.certrow svg{margin-top:2px}
.certrow__main{display:flex;flex-direction:column;gap:3px;min-width:0}
.certrow__t{font-size:14.5px;font-weight:500;overflow-wrap:anywhere}
.certrow__d{font-family:var(--ff-label);font-size:12.5px;color:var(--text-3)}

/* An item editor's two tabs, drawn as folder tabs joined to the page below, so they cannot be missed (decision 0105). */
.edtabs{display:flex;gap:4px;margin:2px 0 22px;border-bottom:2px solid var(--border-hi)}
a.edtab{display:inline-flex;align-items:center;gap:10px;padding:12px 22px 11px;margin-bottom:-2px;font-size:16px;font-weight:600;
  color:var(--text-2);text-decoration:none;border:1px solid transparent;border-bottom:2px solid transparent;border-radius:var(--r) var(--r) 0 0}
a.edtab svg{flex:none;color:var(--text-3)}
a.edtab:hover{background:var(--surface-2);color:var(--text)}
a.edtab[aria-current="page"]{background:var(--surface);color:var(--text);border-color:var(--border-hi);border-bottom-color:var(--surface);
  box-shadow:inset 0 3px 0 var(--accent-fill)}
a.edtab[aria-current="page"] svg{color:var(--accent)}
a.edtab:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px}

/* The Access tab (decision 0105): one panel of rows, what a row controls on its left, its list and its one add control on
   its right, so the three or four lists line up instead of sitting in boxes of different heights. */
.acpanel{padding:0}
.acrow{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px;padding:22px 24px;border-top:1px solid var(--border)}
.acrow:first-child{border-top:0}
.acrow__head h2{display:flex;align-items:center;gap:9px;margin:0 0 5px;font-size:16px}
.acrow__head h2 svg{flex:none;color:var(--accent)}
.acrow__head p{margin:0;font-size:13.5px;line-height:1.45;color:var(--text-2)}
.acrow__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:760px;min-width:0}
.aclist{align-self:stretch;border:1px solid var(--border);border-radius:var(--r);background:var(--surface)}
.acitem{display:flex;align-items:center;gap:12px;min-height:50px;margin:0;padding:8px 14px;border-top:1px solid var(--border)}
.acitem:first-child{border-top:0}
.acitem--empty{font-size:14px;color:var(--text-2)}
.acitem__end{display:flex;align-items:center;gap:8px;margin-left:auto}
.avatar--group{display:inline-grid;place-items:center;background:var(--surface-3);color:var(--text-2)}
@media (max-width:820px){.acrow{grid-template-columns:1fr;gap:12px}}

/* Choosing several employees at once (decision 0102): one bounded list that scrolls, each row a label from edge to edge. */
.picklist{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);max-height:480px;overflow-y:auto}
.pickrow{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 14px;border-top:1px solid var(--border);cursor:pointer}
.pickrow:first-child{border-top:0}
.pickrow:hover{background:var(--surface-2)}
.pickrow.is-chosen{background:var(--accent-soft)}
.pickrow input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--accent-fill)}
.pickrow .avatar{width:28px;height:28px;font-size:11px}
.pickrow__main{display:flex;flex-direction:column;min-width:0}
.pickrow__t{font-size:14.5px;font-weight:500}
.pickrow__m{font-size:12.5px;color:var(--text-3)}
.pickrow--held{cursor:default;color:var(--text-2)}
.pickrow>.chip{margin-left:auto}

/* The certificate fonts (decision 0107, static/wikimas/fonts/README.md): the same files the PDF embeds, so a design
   looks on screen as it prints. Fetched only by pages that draw a certificate. */
@font-face{font-family:"WikiMas Script";src:url("fonts/great-vibes/GreatVibes-Regular.d1358c495233.ttf") format("truetype");font-display:swap}
@font-face{font-family:"WikiMas Sans";src:url("fonts/lato/Lato-Regular.8d72101cad15.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"WikiMas Sans";src:url("fonts/lato/Lato-Bold.79203a194744.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"WikiMas Serif";src:url("fonts/crimson-text/CrimsonText-Regular.3320d6ac936f.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"WikiMas Serif";src:url("fonts/crimson-text/CrimsonText-Bold.b1f1bd2bf4ad.ttf") format("truetype");font-weight:700;font-display:swap}

/* A certificate page (decisions 0103, 0104 and 0106): a US Letter landscape sheet whose text is sized by its own width,
   so it reads the same at any size and matches the PDF. It is a document, so it stays white in the dark theme. A sheet
   without a picture of its own shows the default ground: the ribbon along its top edge and a thin frame inside it. */
.certx{position:relative;width:100%;aspect-ratio:11/8.5;container-type:inline-size;overflow:hidden;background:#fff;color:#1e1f24;
  border:1px solid var(--border-hi);border-radius:var(--r);box-shadow:0 1px 2px rgba(15,30,40,.06),0 6px 20px rgba(15,30,40,.06)}
.certx__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.certx__ribbon,.certx__frame{display:none}
.certx--framed .certx__ribbon{display:block;position:absolute;left:0;right:0;top:0;height:2.316%;
  background:linear-gradient(90deg,var(--vm-yellow) 0 25%,var(--vm-red) 25% 50%,var(--vm-leaf) 50% 75%,var(--vm-teal) 75% 100%)}
.certx--framed .certx__frame{display:block;position:absolute;left:5%;right:5%;top:7%;bottom:5%;border:max(1px,.215cqw) solid #bfe3db}
/* A brand sign (decision 0109): only its width is set; its picture decides its height. */
.certx__mark{position:absolute;display:block}
.certx__mark img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none}
.certx__box{position:absolute;line-height:1.2;overflow-wrap:anywhere}
.certx__box--below{padding-bottom:.25em;border-bottom:max(1px,.107cqw) solid transparent}
.certx__box--above{padding-top:.25em;border-top:max(1px,.107cqw) solid transparent}
.certx__box--sans{font-family:"WikiMas Sans","Segoe UI",Helvetica,Arial,sans-serif}
.certx__box--serif{font-family:"WikiMas Serif",Georgia,"Times New Roman",serif}
.certx__box--script{font-family:"WikiMas Script","Segoe Script","Brush Script MT",cursive}
/* The certificate, then its list right beside it: the certificate as large as the window's height allows, so it is
   seen whole, with any width left over after the list rather than between them (decision 0108). */
.certpage{display:flex;gap:22px;align-items:flex-start}
.certpage > :first-child{flex:1 1 0;min-width:0;max-width:calc((100vh - 250px) * 11 / 8.5)}
.certpage > :last-child{flex:0 0 280px}
@media (max-width:980px){.certpage{flex-direction:column}.certpage > :first-child,.certpage > :last-child{flex:none;width:100%;max-width:none}}
@media print{.certx{border:0;box-shadow:none;border-radius:0}}

/* Certificate designs (decision 0104): the list shows each as its certificate; the editor is the certificate itself. */
.designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.design{display:flex;flex-direction:column;gap:10px}
a.design__sheet{display:block;border-radius:var(--r);text-decoration:none;color:inherit}
a.design__sheet:hover .certx{border-color:var(--accent-fill)}
a.design__sheet:focus-visible{outline:2px solid var(--accent-fill);outline-offset:3px}
.design__foot{display:flex;align-items:flex-start;gap:10px}
.design__t{font-size:15px;font-weight:600}
.design__t a{color:inherit;text-decoration:none}
.design__t a:hover{text-decoration:underline}
.cedit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.cedit__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cedit__stage{touch-action:none;user-select:none}
.cedit__item{cursor:move;min-height:1.2em;outline:1px dashed transparent;outline-offset:1px}
.cedit__item:hover{outline-color:rgba(0,109,90,.5)}
.cedit__item:focus{outline:none}
.cedit__item.is-chosen{outline:2px solid var(--accent-fill);outline-offset:2px}
.cedit__handle{position:absolute;right:-9px;bottom:-9px;width:14px;height:14px;border-radius:3px;background:var(--accent-fill);
  border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:nwse-resize}
.cedit__item:not(.is-chosen) .cedit__handle{display:none}
.cedit__side{display:flex;flex-direction:column;gap:14px}
.cedit__box{display:flex;flex-direction:column;gap:10px;margin:0;padding:14px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface-2)}
.cedit__box .field{margin:0}
.cedit__box input[type=number],.cedit__box select{font:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--border-hi);border-radius:var(--r-sm);background:var(--surface);color:var(--text)}
.cedit__box input[type=color]{width:100%;height:36px;padding:2px;border:1px solid var(--border-hi);border-radius:var(--r-sm);background:var(--surface)}
.cedit__boxhead{display:flex;align-items:center;justify-content:space-between}
.cedit__textprops,.cedit__wording{display:flex;flex-direction:column;gap:10px}
.cedit__textprops[hidden],.cedit__wording[hidden]{display:none}
.cedit__stage .certx__mark.cedit__item{min-height:0}
.cedit__signs{display:flex;flex-direction:column;gap:10px}
.cedit__signs[hidden]{display:none}
.signpicks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.signpick{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:8px;border:1px solid var(--border-hi);border-radius:var(--r-sm);
  background:#fff;font:inherit;font-size:12px;line-height:1.25;color:var(--text-2);text-align:center;cursor:pointer}
.signpick:hover{border-color:var(--text-3)}
.signpick[aria-pressed="true"]{border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill);color:var(--text);font-weight:600}
.signpick__img{display:flex;align-items:center;justify-content:center;height:46px}
.signpick__img img{max-width:100%;max-height:100%}
.cedit__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cedit__lang{display:inline-flex;border:1px solid var(--border-hi);border-radius:var(--r-sm);overflow:hidden;background:var(--surface)}
.cedit__lang button{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:6px 12px;font:inherit;font-size:13px;color:var(--text-2);cursor:pointer}
.cedit__lang button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);font-weight:600}
@media (max-width:1100px){.cedit{grid-template-columns:1fr}}

/* A certificate as its saved PDF (decision 0107), as large as the window allows without scrolling. A browser's PDF viewer
   sets the page inside a grey margin, and each browser's is its own, so the viewer is drawn larger than the frame by the
   margin of the browser it is in, and the frame cuts off the rest; the page fills the frame, its corners rounded off with
   it (decisions 0120 and 0121). In Edge, measured in Edge itself, the viewer is a little taller than the frame and much
   wider, so the page is fitted to the height, a pixel over, and centered; in other Chromium browsers, whose side margins
   are wider, it is fitted to the width. Any other browser shows the viewer as it is. */
.certview{display:flex;flex-direction:column;gap:12px}
.certview__frame{position:relative;width:100%;aspect-ratio:11/8.5;border:1px solid var(--border-hi);border-radius:var(--r);overflow:hidden;
  background:var(--surface);box-shadow:0 1px 2px rgba(15,30,40,.06),0 6px 20px rgba(15,30,40,.06)}
.certview__pdf{display:block;width:100%;height:100%;border:0}
.certview--edge .certview__pdf{position:absolute;left:-10px;top:-3px;width:calc(100% + 20px);height:calc(100% + 7px)}
.certview--chromium .certview__pdf{position:absolute;left:-12px;top:-3px;width:calc(100% + 24px);height:calc(100% + 40px)}
.certview__pdf[hidden]{display:none}
.certview__fallback{position:absolute;inset:0;border:0;border-radius:0}
.certview__actions{gap:8px}
.cedit__lang a{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;color:var(--text-2);text-decoration:none}
.cedit__lang a[aria-current="true"]{background:var(--ink);color:var(--on-ink);font-weight:600}
/* An employee's certificates, each opening its page, with its reissue button beside it (decision 0107). */
.certline{display:flex;align-items:center;border-bottom:1px solid var(--border)}
.certline:last-child{border-bottom:0}
.certline .certrow{flex:1;min-width:0;border-bottom:0}
.certline__action{flex:none;margin-right:10px}

/* Decision 0108: where the page is too narrow for a wide list and a side column together, the side column's panels move
   above the list, side by side, and the list takes the whole width, rather than the list being squeezed into a scroll. */
@media (max-width:1500px){
  .two--aside-first{grid-template-columns:minmax(0,1fr)}
  .two--aside-first > :last-child{order:-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));align-items:start}
}


/* The third welcome photograph (design/assets/README.md): the nurse reading a tablet. The band keeps the design's
   height; the photograph is held to its right, a little below its middle, so her face and the tablet in her hands show
   together, which says she is reading, at every width from 1366 to 1920 pixels. */
.hero__photo{background-image:url("../design/assets/Hero page 3.0d83b9817157.webp");background-position:right 58%}

/* Decision 0119. A switch of two states, such as Available and Required: both named, the one in force filled, the
   other a button that changes it. */
.switch2{display:inline-flex;align-items:stretch;border:1px solid var(--border-hi);border-radius:999px;overflow:hidden;
  background:var(--surface);font-size:13px;line-height:1}
.switch2>*{display:inline-flex;align-items:center;padding:6px 12px;border:0;background:none;font:inherit;color:var(--text-2)}
.switch2>*+*{border-left:1px solid var(--border-hi)}
.switch2 button{cursor:pointer}
.switch2 button:hover{background:var(--surface-2);color:var(--text)}
.switch2 button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;border-radius:999px}
.switch2 .switch2__on{background:var(--ink);color:var(--on-ink);font-weight:600}
.switch2[aria-disabled="true"]{opacity:.8}
/* Who has an item through its audiences, opened under them */
.whohas{margin-top:2px}
.whohas>summary{list-style:none;width:fit-content}
.whohas>summary::-webkit-details-marker{display:none}
.whohas[open]>summary{background:var(--surface-2)}
.whohas__n{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 5px;border-radius:9px;
  background:var(--surface-3);font-size:11.5px;font-weight:600}
.whohas__list{margin-top:10px}
/* The confirmation page: what a person has now, then what they will have (decision 0119) */
.chip--was{color:var(--text-2)}
.reach-to{display:inline-flex;align-items:center;gap:8px;color:var(--text-3)}
/* The breadcrumb ends with the page itself, which is not a link (decision 0119) */
.trail .pagehead__back{margin:0}
.trail__here{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:3px 6px;color:var(--text);font-weight:600}
.trail__here svg{color:var(--lv,var(--text-3))}

/* Decision 0121. A list that runs to a panel's edge follows the panel's rounded corners, so a row tinted under the pointer,
   or the one chosen, does not square them off. A table's box already scrolls, so it cuts what it holds to its own corners;
   a list of links or of tiles is cut to them. */
.panel > :is(.wrap-x, .tree, .stats):first-child{border-top-left-radius:calc(var(--r-lg) - 1px);border-top-right-radius:calc(var(--r-lg) - 1px)}
.panel > :is(.wrap-x, .tree, .stats):last-child,
.panel > form:last-child > .wrap-x:not(:has(~ :not([hidden], noscript, .savebar))){
  border-bottom-left-radius:calc(var(--r-lg) - 1px);border-bottom-right-radius:calc(var(--r-lg) - 1px)}
.panel > :is(.tree, .stats){overflow:hidden}


/* How long something takes (decision 0122): a clock and "10 min". At a row's end it comes last, and the clocks of a
   list line up in a column; in a line of facts about an item it is one fact more. */
.dur{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.dur svg{flex:none;color:var(--text-3)}
.mat__end .dur,.irow__end .dur{min-width:64px;font-size:13px;color:var(--text-2)}
.mat--locked .dur{color:var(--text-3)}
:is(.mat__m,.irow__m) .dur{gap:3px;vertical-align:-2px}
:is(.mat__m,.irow__m) .dur svg{width:12px;height:12px}
.totaltime .readfield__value{font-variant-numeric:tabular-nums}
.totaltime .field__help{margin-top:0}

/* The estimated time holds four digits at most, and its box is sized for them (decision 0123). */
.field input[data-estimate]{max-width:6.5em}

/* Reaching somebody (decisions 0134 and 0135): a Teams chat and an email. Beside a page's heading they are outlined
   buttons with their words; at the end of a row of people, two small buttons named when pointed at; elsewhere quiet
   links with their words, lined up with the text above them. */
.contact{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px}
.contact--links{margin-left:-10px}
.contact--icons .btn{padding:6px;color:var(--text-2)}
.contact--icons .btn:hover{color:var(--accent)}
.contact--buttons{gap:8px}
/* Under a person's name: their job title and departments (decision 0135) */
.who-cell__m{display:block;font-size:12.5px;line-height:1.35;color:var(--text-3)}
/* Choosing one person (decision 0135): the list that says who each one is, as wide as the list of people above it */
.acrow__body>.reveal[open]{align-self:stretch}
.reveal__form--pick{flex-direction:column;align-items:stretch}
.reveal__form--pick .reveal__actions{align-self:flex-start}
.pickone{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.pickone__legend{float:left;margin-bottom:4px;padding:0;font-size:13px;font-weight:600;color:var(--text-2)}
.pickone__legend+*{clear:left}
.pickone__search{max-width:360px}
.picklist--short{max-height:calc(6 * 53px);background:var(--surface)}
.pickrow input[type="radio"]{accent-color:var(--accent-fill)}

/* User Reports (decision 0139): one line for each report, which opens in place. Its columns line up from one report to
   the next: whether it is new, the person, the start of what they wrote, the training, the day. Opened, the line shows
   the person's job title, and the start of the text gives way to the whole of it below. */
.ureports__filter{margin-bottom:14px}
.pill--count b{font-weight:600;color:var(--text-3)}
.pill--count[aria-current="true"] b{color:var(--on-ink)}
.ureport{border-top:1px solid var(--border)}
.ureport:first-child{border-top:0}
.ureport__line{display:grid;grid-template-columns:10px 30px 200px minmax(0,1fr) minmax(0,240px) 110px 16px;align-items:center;
  gap:14px;padding:13px 20px;cursor:pointer;list-style:none}
.ureport__line::-webkit-details-marker{display:none}
.ureport__line:hover,.ureport[open] .ureport__line{background:var(--surface-2)}
.ureport__line:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.panel>.ureport:first-child,.panel>.ureport:first-child .ureport__line{border-top-left-radius:calc(var(--r-lg) - 1px);border-top-right-radius:calc(var(--r-lg) - 1px)}
.ureport__dot{width:10px;height:10px;border-radius:50%;background:var(--ok-fill)}
.ureport--new .ureport__dot{background:var(--warn-fill)}
.ureport__who{display:flex;flex-direction:column;min-width:0}
.ureport__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ureport__work{display:none;font-size:12.5px;line-height:1.35;color:var(--text-3)}
.ureport[open] .ureport__work{display:block}
.ureport__gist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
/* Opened, the start of the text gives its column to the person, whose job title then fits on one line */
.ureport[open] .ureport__gist{display:none}
.ureport[open] .ureport__who{grid-column:3 / 5}
.ureport__item{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;color:var(--text-2)}
.ureport__item svg{flex:none;color:var(--lv)}
.ureport__day{text-align:right;font-size:13.5px;color:var(--text-3);white-space:nowrap}
.ureport__chev{color:var(--text-3);transition:transform .15s}
.ureport[open] .ureport__chev{transform:rotate(180deg)}
/* The opened report lines up under the start of the text, past the dot and the initials */
.ureport__open{padding:2px 20px 16px 88px;background:var(--surface-2)}
.ureport__text{margin:0;max-width:80ch;font-size:15.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.ureport__facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:10px;font-size:13px;color:var(--text-3)}
.ureport__page{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:3px 10px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);color:var(--text-2);text-decoration:none}
.ureport__page:hover{border-color:var(--border-hi);color:var(--accent)}
.ureport__page svg{flex:none;color:var(--text-3)}
.ureport__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.ureport__end{display:flex;align-items:center;gap:14px;margin-left:auto}
.ureport__done{font-size:13px;color:var(--text-3)}
.ureports__empty{margin:0;padding:18px 22px}
@media (max-width:1100px){.ureport__line{grid-template-columns:10px 30px 170px minmax(0,1fr) 90px 16px}.ureport__item{display:none}}
@media (max-width:700px){.ureport__line{grid-template-columns:10px 30px minmax(0,1fr) 80px 16px}.ureport__gist{display:none}
  .ureport[open] .ureport__who{grid-column:auto}.ureport__open{padding-left:20px}}
/* An item's Alerts tab (decision 0141): three boxes drawn as an audience's conditions, then the days an employee would
   receive the email, each mark in the colour of the box that sends it, weekends greyed, the due date outlined */
.alerts{display:flex;flex-direction:column;gap:24px}
.alerts__rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.alerts__rules .acond__label{display:flex;align-items:center}
.alerts__ctl{padding:12px 11px 14px}
.alerts__read{display:inline-block;padding:4px 0;font-size:15px;font-weight:600}
.alerts__days{flex-direction:row;flex-wrap:wrap;align-content:flex-start;gap:6px;padding:10px 11px 4px}
.aval--read{cursor:default}
.alerts__info{display:inline-flex;margin-left:6px;color:var(--text-3);cursor:help}
.alerts__new{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-2)}
.alerts__new input{width:86px;font:inherit;font-size:14px;padding:6px 8px;border:1px solid var(--border-hi);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text)}
.akey{flex:none;width:10px;height:10px;margin-right:8px;border-radius:50%}
.akey--until,.aday__mail--until{background:var(--ink)}
.akey--before,.aday__mail--before{background:var(--warn-fill)}
.akey--over,.aday__mail--overdue{background:var(--bad-fill)}
.aplan__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:12px}
.aplan__head h3{font-size:15px;font-weight:650}
.aplan__days{display:grid;grid-template-columns:repeat(var(--days,19),minmax(36px,1fr));gap:5px}
/* Room either side, so a word over a narrow day, such as Assigned, may overhang it without being cut off */
.aplan .wrap-x{margin:0 -14px;padding:0 14px}
.aday{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 10px;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface)}
.aday--weekend{background:var(--surface-3);border-color:transparent}
.aday--weekend .aday__d,.aday--weekend .aday__n{color:var(--text-3)}
.aday--start{border-style:dashed;border-color:var(--border-hi)}
.aday--due{border:2px solid var(--ink);padding:5px 0 9px}
.aday__flag{height:16px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.aday__d{font-size:12px;color:var(--text-3)}
.aday__n{font-size:17px;font-weight:650;line-height:1.1}
.aday__mail{display:grid;place-items:center;width:28px;height:28px;margin-top:4px;border-radius:50%;color:#fff}
.aday__mail--until{color:var(--on-ink)}
.aday__mail--before{color:#2B2300}
.aplan__foot{margin:12px 0 0}
@media (max-width:1100px){.alerts__rules{grid-template-columns:minmax(0,1fr)}}
/* The Assign page says which alerts the due date brings (decision 0141) */
.assign-alerts{display:flex;align-items:center;gap:7px;margin:10px 0 0}
.assign-alerts svg{flex:none}
/* Settings as a settings panel (decision 0144): one row per setting, its sign and name at the left, at the right a
   control as wide as what it holds, a number with its unit beside it; what each does is behind an info sign */
.settings{display:flex;flex-direction:column;gap:12px}
.setgroup+.setgroup{border-top:1px solid var(--border)}
.setgroup__title{padding:14px 20px 2px;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-2)}
.setrow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:9px 20px}
.setrow+.setrow{border-top:1px solid var(--surface-3)}
.setgroup .setrow:last-child{padding-bottom:14px}
.setrow__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent)}
.setrow__name{display:flex;align-items:center;gap:8px;min-width:0}
.setrow__name label{font-size:14.5px;font-weight:600;color:var(--text)}
.setrow__control{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.setrow__control input,.setrow__control select{font:inherit;font-size:14px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border-hi);border-radius:var(--r-sm);padding:7px 10px;outline:none}
.setrow__control input:focus,.setrow__control select:focus{border-color:var(--accent)}
.setrow__control input[type=number]{width:84px;text-align:right}
.setrow__control input[type=text],.setrow__control input[type=email]{width:320px}
.setrow__control .errorlist{text-align:right}
.setrow--error .setrow__control input{border-color:var(--bad)}
.unitbox{display:inline-flex;align-items:center;gap:8px}
.unitbox__unit{min-width:26px;font-size:13.5px;font-weight:600;color:var(--text-3)}
.settings__history{display:inline-flex;align-items:center;gap:7px;align-self:flex-end;font-size:13.5px;color:var(--text-2);text-decoration:none}
.settings__history:hover{color:var(--accent);text-decoration:underline}
.setrow{position:relative}
@media (max-width:700px){.setrow{grid-template-columns:34px minmax(0,1fr)}.setrow__control{grid-column:2;align-items:flex-start}
  .setrow__control input[type=text],.setrow__control input[type=email]{width:100%}
  /* Too narrow for it beside the sign, the explanation opens under the row, as wide as the row */
  .setrow .hint{position:static}
  .setrow .hint__bubble{left:20px;right:20px;top:calc(100% - 4px);width:auto;max-width:none;transform:none}}
/* An explanation behind an info sign, shown on pointing at it or reaching it with the keyboard (decision 0144) */
.hint{position:relative;display:inline-flex;flex:none;color:var(--text-3);cursor:help;border-radius:50%}
.hint:hover,.hint:focus-visible{color:var(--accent)}
.hint:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.hint__bubble{position:absolute;left:calc(100% + 10px);top:50%;z-index:40;width:max-content;max-width:340px;padding:9px 12px;
  border-radius:var(--r);background:var(--ink);color:var(--on-ink);font-size:13px;font-weight:400;line-height:1.45;
  box-shadow:0 6px 18px rgba(16,30,44,.18);transform:translateY(-50%);opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none}
.hint:hover .hint__bubble,.hint:focus .hint__bubble{opacity:1;visibility:visible}

/* Review before publishing (decision 0150) ------------------------------------------------------------------------- */
/* Who else has the editor open: faces under the title, and "is editing" on the line they have open */
.presence{display:flex;align-items:center;gap:10px;margin:-6px 0 16px;font-size:14px;color:var(--text-2)}
.presence:not(:has(.avatar)){display:none}
.presence .avatar{width:28px;height:28px;font-size:11.5px;box-shadow:0 0 0 2px var(--surface)}
.presence__faces{display:flex}
.presence__faces .avatar+.avatar{margin-left:-8px}
.presence__notice{margin-bottom:16px}
.editing{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-2);white-space:nowrap}
.editing .avatar{width:22px;height:22px;font-size:10px}
/* A save that was not made, and the choice it leaves */
.held{align-items:center;margin-bottom:16px}
.held__text{flex:1}
/* The draft's lines taken out, struck through until approved or put back */
.removed-head{margin-top:18px}
.mat--removed .mat__t{text-decoration:line-through;color:var(--text-3)}
.draftbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.draftbar .note{flex:1;margin:0}
/* Administration, Reviews: one row a submission, the row the link */
.rvlist{overflow:hidden}
.rvlist__line{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) auto auto;align-items:center;gap:14px;
  padding:13px 18px;border-top:1px solid var(--border);color:inherit;text-decoration:none}
.rvlist__line:first-child{border-top:0}
.rvlist__line:hover{background:var(--surface-2)}
.rvlist__line:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.rvlist__what{display:flex;flex-direction:column;min-width:0}
.rvlist__t{font-weight:600}
.rvlist__m{font-size:13px;color:var(--text-2)}
.rvlist__when{text-align:right}
.who-line{display:flex;align-items:center;gap:8px;font-size:14px}
.review-by{margin-bottom:18px;flex-wrap:wrap}
/* The review page: each change a line that opens to the published and the draft side by side */
.rv{display:flex;flex-direction:column}
.rv__line{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px;
  border-top:1px solid var(--border);cursor:pointer;list-style:none}
.rv__line::-webkit-details-marker{display:none}
.rv details:first-child>.rv__line{border-top:0}
.rv details[open]>.rv__line>svg:last-child{transform:rotate(180deg)}
.rv__what{font-size:13px;color:var(--text-2)}
.rv__open{padding:4px 16px 18px}
.rv__empty{padding:16px}
.compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px}
.compare__col{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;background:var(--surface);min-width:0}
.compare__col--new{border-color:var(--warn-line)}
.compare__col h3{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);margin:0 0 8px}
.compare__lang+.compare__lang{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border)}
.compare__langname{font-size:12px;color:var(--text-3);margin:0 0 2px}
.compare__title{font-weight:600;margin:0 0 8px}
.compare__media{display:block;max-width:100%;max-height:320px;border-radius:8px;border:1px solid var(--border);margin:0 0 8px}
.compare__media--small{max-height:140px}
.compare__questions{margin:0;padding-left:20px}
.compare__questions li{margin-bottom:10px}
.compare__questions ul{margin:4px 0 0;padding-left:18px;font-size:13.5px}
.compare__correct{font-weight:600;color:var(--ok)}
/* What changed, and beside it the checklist, which moves above it where the window is too narrow */
.review-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}
.review-checklist{position:sticky;top:16px}
.review-checklist__list{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.5}
.review-checklist__misses{margin:0;padding:10px 12px;border-radius:var(--r);background:var(--surface-2);font-size:13px;color:var(--text-2);line-height:1.5}
@media (max-width:1100px){.review-layout{grid-template-columns:minmax(0,1fr)}.review-checklist{position:static;order:-1}}
.safe-harbor{margin:0;padding-left:24px;columns:2 280px;column-gap:28px;font-size:14px;line-height:1.5}
.safe-harbor li{margin-bottom:6px;break-inside:avoid}
/* A button that reads as a link inside a sentence, such as the one that opens the Safe Harbor identifiers */
.linklike{padding:0;border:0;background:none;font:inherit;color:var(--accent);text-decoration:underline;cursor:pointer}
.linklike:hover{color:var(--text)}
.linklike:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
@media (max-width:900px){.rvlist__line{grid-template-columns:auto minmax(0,1fr) auto}.rvlist__line .who-line,.rvlist__when{grid-column:2}}
/* A heading's chips and marks read as the chips they are, not in the heading's small capitals */
.sec-head .chip,.sec-head .editing,.sec-head .editing span{font-family:var(--ff-sans);letter-spacing:normal;text-transform:none}
.sec-head .chip{font-size:12.5px}
.sec-head .chip--warn{color:var(--warn)}
.sec-head .editing{font-size:12.5px;color:var(--text-2)}
.sec-head .editing .avatar{color:#fff;font-size:10px}