.topicList
{
	font-size:12pt;
	color:black;
	background-color:rgba(255,255,255,.5);
	cursor:pointer;
	padding:10px;
	display:flex;
	justify-content:space-between;
	border-bottom:1px solid black;
}
.topicList:hover
{
	filter:invert(1);
}
.entryScale
{
	font-family:IBMPlex;
	font-size:15pt;
	color:#646464;
}
.entry
{
	font-family:IBMPlex;
	font-size:10pt;
	color:black;
	xborder-radius:2px;
	padding:3px;
	cursor:pointer;
}
.themedButton
{
	background-color:grey;
}
.toolbarItem 
{
	display:inline-block;
	cursor:pointer;
}
.toolbarItemH
{
	display:none;
}
.videoMarker
{
	width:9px;
	height:9px;
	position:absolute;
	cursor:pointer;
	z-index:7;
	margin:-3px 0 0 -3px;
	border:1px solid black;
	box-sizing:border-box;
}
.topic
{
	font-size:12pt;
	color:white;
	background-color:#0FF138;
	height:23px;
	position:absolute;
	bottom:3px;
	cursor:pointer;
	z-index:1;
	overflow-x:hidden;
	margin-left:-3px;
}
.topicH.topic
{
	display:none;
}
.blocker
{
	opacity:0;
	background-color:red;
	height:36px;
	position:absolute;
	top:0;
	z-index:1000;
	overflow-x:hidden;
}
.sliderMarker
{
	xborder-radius:50%;
	background-color:white;
	xborder:1px solid white;
	position:absolute;
	top:0px;
	width:9px;
	height:100%;
	cursor:default;
	z-index:4;
}
.dialog
{
	padding:15px;
	display:inline-block;
	background-color:white;
	position:absolute;
	max-height:550px;
	overflow:auto;
	z-index:9999;
}
.alert
{
	border:1px solid #646464;
	border-radius:10px;
	padding:20px;
	display:block;
	background-color:rgba(255,255,255);
	position:absolute;
	z-index:110001;
	font-size:14pt;
	color:#36454F;
	max-height:calc(100% - 50px);
	overflow-y:auto;
	box-shadow:2px 2px grey;
}
.heading
{
	font-family:IBMPlex;
	font-weight:bold;
	font-size:14pt;
	color:#646464;  
}
.videoToolbar
{
	border:3px solid #2e2e2e;
	box-sizing:border-box;
	background-color:#2e2e2e;
	position:relative;
	height:40px;
	user-select:none;
	-webkit-user-select:none;
}
.label
{
	font-family:IBMPlex;
	font-size:10pt;
	color:black;
}
.entry:not(div):not(table):not(span):not(td)
{
	border:1px solid;
}
input[type=file].entry
{
	border:0;
	padding-left:0;
}
input[type=submit].entry,input[type=button].entry
{
	background-color:#2e2e2e;
	border:1px solid #2e2e2e;
	font-size:10pt;
	color:white;
	padding:5px;
	cursor:pointer;
}
input[type=submit].entry:hover,input[type=button].entry:hover
{
	background-color:white;
	color:#2e2e2e;
}
div.entry
{
	padding-left:0;
}
.entrySeq
{
	font-family:IBMPlex;
	font-size:15pt;
	color:#646464;
	margin-right:20px;
}
.timeSelection
{
	font-family:IBMPlex;
	font-size:10pt;
	color:black;
	border:1px solid;
	border-radius:2px;
	padding:3px;
}
input[type=number].timeSelection
{
	width:50px;
}
.sizer
{
	position:absolute;
	display:none;
	width:4px;
	height:4px;
	background-color:white;
	z-index:9998;
	border:1px solid black;
}
.loading
{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	background-color:#FFFFFF;
	z-index:100;
	top:0;
	left:0;
	text-align:center;
}
.loadingMessage
{
	margin-top:50px;
	color:#2E86C1;
	font-size:20pt;
	font-weight:bold;
	font-family:IBMPlex;
}
.cover
{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	top:0;
	left:0;
	background-color:blue;
	z-index:110000;
	opacity:.2;
	display:none;
}
.list_item
{
	font-family:IBMPlex;
	font-size:16pt;
	cursor:pointer;
	margin-bottom:5px;
}
.userNote
{
	width:200px;
	height:112px;
	position:absolute;
	display:flex;
	align-items:center;
	justify-content:center;
	top:0;
	right:0;
	color:#FFFFFF;
	opacity:0;
	transition: all 0.5s ease;
	cursor:pointer;
}
.userNote:hover
{
	opacity:1;
}
.spliceMarker
{
	position:absolute;
	z-index:3;
	height:7px;
	top:3px;
}
.ilist
{
	border-bottom:1px solid black;
}
.ilist:hover
{
	background-color:#DCDCDC;
	cursor:pointer;
}
.closeButton
{
	position:absolute;
	display:block;
	top:0;
	right:5px;
	cursor:pointer;
	z-index:99999999;
}
.lightBoxClose
{
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family:questrial;
	font-size:18pt;
	top:-25px;
	right:-25px;
	cursor:pointer;
	z-index:99999999;
	width:50px;
	height:50px;
	background-color:white;
	color:black;
	border-radius:50%;
	box-sizing:border-box;
	box-shadow:1px 1px;
}
.lightBoxClose:hover
{
	box-shadow:unset;
	filter:invert(1);
}
.closeBox
{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'IBMPlex';
    font-size: 30pt;
    top: 9px;
    right: 9px;
    cursor: pointer;
    z-index: 99999999;
    width: 48px;
    height: 48px;
    background-color: transparent;
    color: white;
    font-weight: lighter;
}
.closeBox:hover
{
	color:grey;
}
.arrowButton
{
	position:absolute;
	display:block;
	cursor:pointer;
	z-index:99999999;
}
.tab_row
{
	font-size:0;
}
.tab
{
	border-right:1px solid lightgrey;
	border-bottom:1px solid lightgrey;
	padding:7px;
	cursor:pointer;
	font-size:12pt;
	user-select:none;
	-webkit-user-select:none;
	display:inline-block;
}
.tab.active
{
	color:white;
	background-color:#646464;
}
.tab:not(.active)
{
	color:black;
}
.tab:not(.active):hover
{
	background-color:darkgrey;
	color:white;
}
.numThumb
{
	font-size:10pt;
	font-family:IBMPlex;
	font-weight:bold;
	display:flex;
	justify-content:center;
	align-items:center;
	border-radius:2px;
	width:20px;
	height:20px;
}
.tooltip
{
  position: relative;
  display: inline-block;
  border-bottom: 1px dashed;
  cursor: help;
}
.tooltip .tooltiptext
{
  visibility: hidden;
  width: 320px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 7px;
  position: absolute;
  z-index: 1;
  white-space:break-spaces;
  margin-top:5px;
}
.tooltip:hover .tooltiptext
{
  visibility: visible;
}
.bubble
{
	font-family:IBMPlex;
	position: absolute;
	top:55px;
	right:52px;
	max-width: 30em;
	background-color: #fff;
	padding: 0.8em 1.0em;
	font-size: 1.25em;
	border-radius: 1rem;
	box-shadow:	0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
	animation: blinker 4s ease infinite;
}
.bubble::before
{
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	bottom: 100%;
	right: 25px;
	border: .75rem solid transparent;
	border-top: none;
	border-bottom-color: #fff;
	filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}
@keyframes blinker
{
	50%
	{
		opacity:0;
	}
}
.boxShadow:hover
{
	box-shadow: 0 12px 13px 0 rgba(85,200,255,0.75), 0 0px 13px 0 rgba(255,75,200,0.65);
	border-radius:5px;
}
.spliceHelp
{
	color:black;
	font-size:14pt;
	font-weight:bold;
	font-family:IBMPlex;
	text-align:justify;
	margin:10px;
	display:none;
	max-width:450px;
}
.openMenu
{
	width:200px;
	/* A visible right edge. box-shadow rather than border-right ON PURPOSE: a border would
	 * make the rail 201px and every measurement written against 200 would drift by one.
	 * Without this the rail is black on a black page, so nothing marks where the menu ends
	 * and any control near that edge reads as floating in the middle of the field. */
	box-shadow:1px 0 0 #2E2E2E;
	height:calc(100% - 46px);
	xbackground-color:rgba(0,0,0,1);
	opacity:.9;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	transition:all .15s linear;
	xoverflow-y:auto;
	user-select:none;
	-webkit-user-select:none;
}
.closeMenu
{
	width:0;
	height:calc(100% - 46px);
	xbackground-color:rgba(0,0,0,1);
	opacity:.9;
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	transition:all .15s linear;
	xoverflow:hidden;
}
.closeMenu > .menu_mode_in
{
	opacity:0;
}
.closeMenu > .menu_mode_out
{
	opacity:0;
}
/*
 * The side-menu open/close handle. DT #2746, reworked 2026-08-29 on Eric's call.
 *
 * 🔴 IT IS ANCHORED TO THE RAIL, NOT TO THE VIEWPORT, AND THAT IS THE WHOLE POINT.
 * It used to be position:fixed at a hardcoded left:160px, with toggleEditMenu() writing
 * left:160px and left:-5px a second and third time in JS. THREE copies of one number,
 * and they were only ever correct because .openMenu happens to be 200px wide: the
 * handle is 40px, and 160 + 40 = 200. Any change to the rail width silently desynced it
 * with nothing to catch that.
 *
 * left:100% on an absolutely positioned child of the rail does the same job with ONE
 * rule and no number at all, and it keeps working at any rail width. It also makes the
 * CLOSED state fall out for free rather than needing its own rule: .closeMenu is
 * width:0, so 100% resolves to 0 and the handle lands at the screen edge as the "open"
 * pull. Measured on bench1: open -> 200-223, closed -> 0-23, reopened -> 200-223, with
 * both JS offsets deleted.
 *
 * 🔴 WHY IT MOVED OUT OF THE CONTENT COLUMN. At left:160px the handle's 40px box
 * covered x 160-200, which is where a menu row's right-hand content sits. It clipped the
 * right 15px of whichever DT #2746 "NEW" pill happened to be at viewport mid-height
 * (pills run 136-175), and it covered the 15px scrollbar so the track could not be
 * grabbed there. Sitting OUTSIDE the rail means no future row content can collide with
 * it either - a longer label, a second badge - which a nudge to the pills would not have
 * achieved.
 *
 * 🔴 top:50% IS OF THE RAIL, NOT THE VIEWPORT, and that is also deliberate. As a
 * fixed element it tracked viewport centre, so which row it landed on changed with the
 * window height and with the video's aspect ratio - Eric's observation that it sat badly
 * with a portrait video. Anchored to the rail it is stable.
 *
 * The background is #1D1D1D rather than black, matching .menu2: a black handle on a
 * black page has no edge, which is the other half of what looked wrong.
 */
.editMenuToggle
{
	width:22px;
	height:56px;
	background-color:#1D1D1D;
	border:1px solid #2E2E2E;
	border-left:none;
	border-radius:0 10px 10px 0;
	color:#C8C8C8;
	font-weight:bold;
	font-size:16px;
	top:50%;
	left:100%;
	transform:translateY(-50%);
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	cursor:pointer;
	z-index:999;
}
.editVid
{
	color:white;
	cursor:pointer;
}
.editVid:hover
{
	color:black;
	background-color:lightgrey;
}
.closeSubmenu 
{
	overflow:hidden;
	max-height:0;
	transition:all 0.1s ease;
}
.openSubmenu
{
	overflow:hidden;
	max-height:2000px;
	transition:all 0.6s ease;
}
.previewReturn
{
	display:block;
	position:absolute;
	top:0;
	right:0;
	z-index:9999999;
	cursor:pointer;
	width:40px;
	color:white;
	background-color:rgba(0,0,0,.9);
	padding:8px;
	font-family:IBMPlex;
	font-size:10pt;
}
.previewReturn:hover
{
	filter:invert(1);
	border:1px solid white;
}
.menu1
{
	padding:10px 10px 10px 10px;
	background-color:rgba(0,0,0,1);
	xuser-select:none;
	-xwebkit-xuser-select:none;
}
.menu2
{
	padding:10px 10px 10px 20px;
	background-color:rgba(29,29,29,1);
	xuser-select:none;
	-xwebkit-xuser-select:none;
}
.menu3
{
	padding:10px 10px 10px 30px;
	background-color:rgba(57,57,57,1);
	xuser-select:none;
	-xwebkit-xuser-select:none;
}
.hsMenu
{
	color:white;
	margin:20px 0 10px 10px;
	font-weight:bold;
	xuser-select:none;
	-xwebkit-xuser-select:none;
}
.modeInfo
{
	color:white;
	margin:20px 20px 10px 10px;
	font-style:italic;
	xuser-select:none;
	-xwebkit-xuser-select:none;
}
.menu_mode_out 
{
  visibility: hidden;
  transform: scale(0);
  transition:all .3s linear;
}
.menu_mode_in 
{
  visibility: visible;
  transform: scale(1);
  transition:all .3s linear;
}
.menuCog
{
	position:absolute;
	display:block;
	top:0;
	right:7px;
	width:20px;
	z-index:10;
	cursor:pointer;
	padding:10px;
}
.menuAction
{
	position:absolute;
	top:5px;
	right:10px;
	font-weight:bold;
	font-family:roboto;
	font-size:18pt;
	padding:0 10px 0 10px;
	display:none;
}
.liveEditVid
{
	position:relative;
}
.liveEditVid:hover
{
	color:black;
}
.menuHidden
{
	background-color:rgba(169,169,169,.8);
	text-decoration:line-through;
}
.menu2.liveEditVid
{
	padding:10px 10px 10px 40px;
	background-color:rgba(0,0,0,1);
}
.menu2.liveEditVid:hover
{
	color:black;
	background-color:lightgrey;
}
.menuDrag
{
	color:white;
	background-color:rgb(48,48,48);
	font-weight:bold;
}
.alertEx
{
	cursor:pointer;
	border:1px solid black;
	padding:20px !important;
	border-radius:10px;
	xxdisplay:block;
	background-color:rgba(255,255,255,.9);
	position:absolute;
	z-index:110001;
	max-height:calc(100% - 50px);
	overflow-y:auto;
	animation:dropIn .6s ease;
	box-sizing:border-box;
	max-width:500px;
}
.alertExOut
{
	border:1px solid black;
	padding:20px !important;
	border-radius:10px;
	xxdisplay:block;
	background-color:rgba(255,255,255,.9);
	position:absolute;
	z-index:110001;
	max-height:calc(100% - 50px);
	overflow-y:auto;
	animation:dropOut .5s ease;
	box-sizing:border-box;
	max-width:500px;
}
@keyframes dropIn
{
	0%
	{
		margin-top:-100vh;
	}
	100%
	{
		margin-top:unset;
	}
}
@keyframes dropOut
{
	0%
	{
		margin-top:unset;
	}
	100%
	{
		margin-top:-100vh;
	}
}
.choiceImgs
{
	display:flex;
	justify-content:flex-start;
	gap:30px;
	align-items:center;
	flex-grow:1;
}
.choiceGrow
{
	flex:1 1 0px;
	text-align:center;
}
img.choiceMarker
{
	box-sizing:border-box;
	border:3px solid transparent;
	cursor:pointer;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
}


    /* 3-row layout: stem / choices / submit */
    .mcq {
      height: 100%;
      width: 100%;
      box-sizing: border-box;

      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
      padding: 12px;
    }

    .mcq__stem {
      overflow: hidden;
    }

    .mcq__question {
      font-size: 1.05rem;
      font-weight: 650;
      margin-bottom: 6px;
      color: #111;
    }

    .mcq__hint {
      margin: 0;
      line-height: 1.25;
      color: rgba(0,0,0,0.7);
      font-size: 0.95rem;
    }

    /* The image grid row (middle row) */
    .mcq__choices {
      min-height: 0; /* critical: allow this 1fr row to shrink properly */
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
      align-content: stretch; /* fill available height */
    }

    .mcq__choice {
      display: block;
      border: 2px solid rgba(0,0,0,0.12);
      border-radius: 14px;
      overflow: hidden;
      cursor: pointer;
      user-select: none;
      min-height: 0;
      background: #fff;
      transition: border-color 120ms ease;
    }

    .mcq__choice > input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .mcq__choiceInner {
      height: 100%;
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Key rule: preserve aspect ratio, no cropping */
    .mcq__choiceInner img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    /* Selected state without :has() (JS adds .is-selected) */
    .mcq__choice.is-selected {
      border-color: rgba(0,0,0,0.55);
    }















@media screen and (max-width:479px)
{
	.choiceImgs
	{
		flex-direction:column;
		align-items:flex-start;
	}
	.choiceGrow
	{
		flex:unset;
		text-align:unset;
		flex-grow:1;
		flex-basis:0;
		min-height:0;
	}
	.alertEx,.alertExOut
	{
		width:95vw;
	}
	.alert
	{
		box-sizing:border-box;
		width:80vw;
	}
}
.luma-toggle-row
{
	display:flex;
	flex-wrap:wrap;
	gap:28px 40px;
	align-items:center;
}
.luma-toggle
{
	display:inline-flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	user-select:none;
	-webkit-user-select:none;
	font-family:IBMPlex;
	font-size:10pt;
	color:black;
}
.luma-toggle input[type=checkbox]
{
	position:absolute;
	opacity:0;
	width:0;
	height:0;
	pointer-events:none;
}
.luma-toggle-track
{
	position:relative;
	display:inline-block;
	width:44px;
	height:24px;
	background-color:#d0d0d0;
	border-radius:12px;
	transition:background-color 150ms ease;
	flex-shrink:0;
}
.luma-toggle-knob
{
	position:absolute;
	top:2px;
	left:2px;
	width:20px;
	height:20px;
	background-color:#ffffff;
	border-radius:50%;
	box-shadow:0 1px 3px rgba(0,0,0,0.25);
	transition:left 150ms ease;
}
.luma-toggle input[type=checkbox]:checked + .luma-toggle-track
{
	background-color:#0064FF;
}
.luma-toggle input[type=checkbox]:checked + .luma-toggle-track .luma-toggle-knob
{
	left:22px;
}
.luma-toggle input[type=checkbox]:focus-visible + .luma-toggle-track
{
	box-shadow:0 0 0 3px rgba(0,100,255,0.35);
}
.luma-toggle-label
{
	font-size:10pt;
	color:black;
}
.luma-toggle-item
{
	display:inline-flex;
	align-items:center;
}
/* Conditional row hide for schema-driven dependsOn (createFormField).
   !important so additive hiding stays additive over an element formInit
   hook that has already set tr.style.display directly. */
.luma-deps-hidden
{
	display:none !important;
}
/* Schema-driven release gate (createFormField, gatedOff). The row is SHOWN on every
   tenant on purpose so customers discover the option and ask for it; the control is
   made read-only in JS by reverting changes rather than by `disabled`, because a
   disabled input is dropped from the submission and re-saving would silently clear a
   value set while the gate was on. This is the visual half of that: it must read as
   unavailable, so the control is dimmed and the cursor says not-allowed, while the
   label and its blue "i" stay at full contrast because the help text is the entire
   point of showing the row at all. */
.luma-gated-off input,
.luma-gated-off select,
.luma-gated-off textarea
{
	opacity:0.45;
	cursor:not-allowed;
	pointer-events:none;
}
.luma-gated-off .label
{
	opacity:0.7;
}
.luma-info
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-left:6px;
	position:relative;
	cursor:help;
	outline:none;
	width:16px;
	height:16px;
	border-radius:50%;
	-webkit-tap-highlight-color:transparent;
}
.luma-info svg
{
	display:block;
	transition:transform 150ms ease, filter 150ms ease;
	filter:drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
.luma-info:hover svg,
.luma-info:focus-visible svg,
.luma-info.is-open svg
{
	transform:scale(1.12);
	filter:drop-shadow(0 2px 4px rgba(0,100,255,0.35));
}
.luma-info:focus-visible
{
	outline:2px solid rgba(0,100,255,0.55);
	outline-offset:2px;
}
.luma-info-tooltip
{
	position:absolute;
	bottom:calc(100% + 12px);
	left:50%;
	transform:translateX(calc(-50% + 40px)) translateY(4px);
	min-width:240px;
	max-width:320px;
	width:max-content;
	padding:12px 14px;
	background-color:#2e2e2e;
	color:#ffffff;
	font-family:IBMPlex,Arial,sans-serif;
	font-size:11pt;
	font-weight:normal;
	line-height:1.45;
	border-radius:8px;
	box-shadow:0 6px 18px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.18);
	z-index:10000;
	opacity:0;
	pointer-events:none;
	transition:opacity 160ms ease, transform 160ms ease;
	text-align:left;
	white-space:normal;
}
.luma-info-tooltip::after
{
	content:"";
	position:absolute;
	top:100%;
	left:50%;
	transform:translateX(calc(-50% - 40px));
	border:7px solid transparent;
	border-top-color:#2e2e2e;
	filter:drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}
.luma-info:hover .luma-info-tooltip,
.luma-info:focus-visible .luma-info-tooltip,
.luma-info.is-open .luma-info-tooltip
{
	opacity:1;
	pointer-events:auto;
	transform:translateX(calc(-50% + 40px)) translateY(0);
}
@media (max-width:700px)
{
	.luma-info-tooltip
	{
		min-width:200px;
		max-width:75vw;
		font-size:10pt;
	}
}

/* ────────────────────────────────────────────────────────────────────────
   mobile_menu_v2 — dark-theme overrides for shared utility classes.
   Activated only when the parent v2 chrome injects `m-v2-dark` onto the
   iframe document body. Inert in legacy (desktop / mobile_menu_v2=0)
   contexts because the class is never present there.
   ──────────────────────────────────────────────────────────────────────── */
body.m-v2-dark .label
{
	color:#f1f5f9;
}
body.m-v2-dark input.entry:not([type=submit]):not([type=button]):not([type=file]),
body.m-v2-dark select.entry,
body.m-v2-dark textarea.entry
{
	background-color:#1e293b;
	color:#f1f5f9;
	border-color:#475569;
}
body.m-v2-dark input.entry::placeholder
{
	color:#94a3b8;
}
body.m-v2-dark input[type=submit].entry,
body.m-v2-dark input[type=button].entry
{
	background-color:#3b4fd8;
	border-color:#3b4fd8;
	color:#ffffff;
}
body.m-v2-dark input[type=submit].entry:hover,
body.m-v2-dark input[type=button].entry:hover
{
	background-color:#1d4ed8;
	border-color:#1d4ed8;
	color:#ffffff;
}
body.m-v2-dark .topicList
{
	color:#f1f5f9;
	background-color:rgba(30,41,59,.6);
}/*
 * DT #2746 - the "NEW" pill on the Site Tasks menu items.
 *
 * 🔴 ITS OWN CLASS, DELIBERATELY. Do NOT reuse .menuAction above: that is the
 * menu-edit HIDE/SHOW toggle, it is display:none until editMenu() creates it, it is
 * absolutely positioned against .liveEditVid, and it is removed again by
 * exitMenuEdit(). Sharing the class would make the pill vanish and reappear with the
 * settings cog. .menuAction's geometry is the precedent here; its class is not.
 *
 * 🔴 ORANGE, AS IN JOHN'S MOCKUP. Eric's ruling, 2026-08-29, and it REVERSES his
 * own earlier same-day ruling that this pill would be Ice Blue. Both were made with the
 * rendered menu in front of him: the Ice Blue call came from the hex values, the orange
 * call came from seeing three treatments side by side at real size on bench1. The later
 * one stands. Black #000000 on Orange #F5A524 measures 10.29:1, the highest contrast of
 * the three candidates and comfortably past the AA 4.5:1 that brand colour rule 4 asks
 * for.
 *
 * 🔴 THIS IS A DELIBERATE, ERIC-APPROVED BRAND EXCEPTION AND NOT AN OVERSIGHT.
 * The LUMA1 palette carries NO orange or amber, so a future brand sweep will find this
 * and want to "correct" it back to Ice Blue #E8EAFE. Do not. The reason it is allowed
 * here is that it is John Hudson's own mockup colour for his own requested feature, and
 * Eric chose it over the on-palette alternative after seeing both. Signal Green and
 * Alert Red remain reserved for Cleared / Not Cleared and are still not available to
 * carry "NEW".
 *
 * float:right rather than position:absolute, because the absolute variant would need
 * position:relative on the row, and .menu2 is shared with every other menu item in the
 * editor. A float touches only the rows that carry a pill.
 */
.siteTaskNew
{
	float:right;
	background-color:#F5A524;
	color:#000000;
	font-family:roboto;
	font-size:8pt;
	font-weight:700;
	letter-spacing:0.5px;
	line-height:1;
	/* OPTICAL CENTRING, measured in real Chrome 2026-08-29, not eyeballed.
	 * The padding is ASYMMETRIC ON PURPOSE and must stay that way. With
	 * line-height:1 the inline content box is exactly font-size tall and the
	 * baseline sits at half-leading + font-ascent from its top, so the font's
	 * DESCENDER space is reserved below the baseline. "NEW" is all caps and has
	 * no descenders, so with a symmetric 3px/3px pad the visible ink measured
	 * 2.83px from the top and 3.84px from the bottom - the word rode ~0.5px high
	 * inside its own pill.
	 *
	 * 🔴 THE FINAL 5/2 SPLIT IS ERIC'S EYE, NOT THE ARITHMETIC, AND HIS WINS.
	 * 4px/3px is where the measurement said "centred" (3.83 above, 3.84 below), and
	 * Eric still read the word as a pixel high on a real screen. The metrics that
	 * produced 3.83/3.84 come from canvas TextMetrics, which returns INTEGER font
	 * ascent/descent for this face, so "centred" carried up to half a pixel of
	 * quantisation error and could not be used to argue with him. 5px top / 2px
	 * bottom drops the ink one more pixel. Pill height is unchanged at 17.67px.
	 * A tidy-up back to a single `padding:3px 7px` re-introduces the original defect. */
	padding:5px 7px 2px 7px;
	border-radius:999px;
	margin-left:8px;
	/* And the PILL itself was riding high in the ROW: float:right pins it to the
	 * top of the line box, so its centre measured 18.34 against a row centre of
	 * 20.0. The row is 40px with 10px padding, giving a 20px content band; the
	 * pill is 17.67px tall, so 1px of top margin centres it to within 0.17px. */
	margin-top:1px;
}