/* ==========================================================================
THE HUB AS A FLANGE (D145, 2026-10-12): "Pitch Circle". core/hubring.js
lays it out; this sheet draws it. Every rule is inside #screen-hub.
The menu is a drawing sheet: crop marks, registration targets, a zone
margin (numbers across, letters down) with centring marks, a 2 px frame and
a field ruled with the drawing grid. On it, a flange in plan view: the
rotor (the WrenchUr mark) at the centre, the Plant Map as the bore round
it, every other tool a boss on one chain-line bolt circle with a flat
callout on a leader. On a phone the bolt circle is developed into a line
down the page (hubring.js says how).
Drafting discipline: line weights from drafting.css (--d-wv visible, --d-wt
thin, --d-wc centre), centre lines in chain, hidden lines dashed, square
corners, and the only round shapes are round parts (bosses, the bore) and
balloons. Depth by line weight, never by shadow.
Rule 8: nothing by hue alone. Hover and focus are a heavier ring, a
heavier leader and the callout's corner brackets; focus adds a dashed
ring. Counts are balloons with a word (the word is the first thing a line
too long for its box gives up). SAFETY is the one double-framed,
hatched note, the one filled label and the one use of the red, and it
always says the word.
Hover looks only where the pointer hovers (screens.css, the owner's first
phone test, 2026-09-08: a touched tile kept its hover look and its spinning
badge until another tap). Keyboard focus looks the same everywhere.
========================================================================== */
/* ---------- the screen: the print itself ---------- */
#screen-hub::before{display:none;}
#screen-hub > .hr-scroll{
position:relative; z-index:1; padding:0 0 var(--sab, 0px);
background-color:var(--d-ground); color:var(--d-ink); font-family:var(--draft);
}
/* the cyanotype's coating: uneven, with a paper grain and darker edges */
html:not([data-theme="light"]) #screen-hub > .hr-scroll{
background-image:
radial-gradient(ellipse 120% 95% at 50% 42%, transparent 52%, rgba(5,22,48,.5) 100%),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-attachment:local;
}
/* the green print (D148): the same coating, tinted green, its edges darker green */
html[data-print="green"] #screen-hub > .hr-scroll{
background-image:
radial-gradient(ellipse 120% 95% at 50% 42%, transparent 52%, rgba(4,30,18,.5) 100%),
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
}
/* vellum: drafting film, a faint grain */
html[data-theme="light"] #screen-hub > .hr-scroll{
background-image:
url("data:image/svg+xml;utf8,");
}
/* ---------- the sheet: trim, crop marks, zone margin, frame ---------- */
#screen-hub .hr-trim{position:relative; min-height:100%; padding:12px; display:flex;}
#screen-hub .hr-crop{position:absolute; width:12px; height:12px; pointer-events:none;}
#screen-hub .hr-crop::before,#screen-hub .hr-crop::after{content:''; position:absolute; background:var(--d-ink-3);}
#screen-hub .hr-crop.tl{left:0; top:0;} #screen-hub .hr-crop.tr{right:0; top:0;}
#screen-hub .hr-crop.bl{left:0; bottom:0;} #screen-hub .hr-crop.br{right:0; bottom:0;}
#screen-hub .hr-crop.tl::before,#screen-hub .hr-crop.tr::before{top:11px; width:8px; height:1px;}
#screen-hub .hr-crop.bl::before,#screen-hub .hr-crop.br::before{bottom:11px; width:8px; height:1px;}
#screen-hub .hr-crop.tl::before,#screen-hub .hr-crop.bl::before{left:0;}
#screen-hub .hr-crop.tr::before,#screen-hub .hr-crop.br::before{right:0;}
#screen-hub .hr-crop.tl::after,#screen-hub .hr-crop.bl::after{left:11px; width:1px; height:8px;}
#screen-hub .hr-crop.tr::after,#screen-hub .hr-crop.br::after{right:11px; width:1px; height:8px;}
#screen-hub .hr-crop.tl::after,#screen-hub .hr-crop.tr::after{top:0;}
#screen-hub .hr-crop.bl::after,#screen-hub .hr-crop.br::after{bottom:0;}
#screen-hub .hr-sheet{
position:relative; flex:1; min-width:0;
display:grid; grid-template-columns:20px minmax(0,1fr) 20px; grid-template-rows:20px minmax(0,1fr) 20px;
border:1px solid var(--d-ink-3);
}
#screen-hub .hr-zone{display:flex; color:var(--d-ink-3); font-size:10px; font-weight:700; letter-spacing:.04em; user-select:none;}
#screen-hub .hr-zone span{flex:1; display:grid; place-items:center; min-width:0; min-height:0;}
#screen-hub .hr-zone.zt{grid-area:1/2;} #screen-hub .hr-zone.zb{grid-area:3/2;}
#screen-hub .hr-zone.zl{grid-area:2/1; flex-direction:column;} #screen-hub .hr-zone.zr{grid-area:2/3; flex-direction:column;}
#screen-hub .hr-zone.zt span+span,#screen-hub .hr-zone.zb span+span{border-left:1px solid var(--d-ink-3);}
#screen-hub .hr-zone.zl span+span,#screen-hub .hr-zone.zr span+span{border-top:1px solid var(--d-ink-3);}
/* centring marks, heavy, half on the margin and half into the frame; the
side pair is moved onto the hub's own centre line (hubring.js) */
#screen-hub .hr-cm{position:absolute; background:var(--d-ink); pointer-events:none;}
#screen-hub .hr-cm.t,#screen-hub .hr-cm.b{left:calc(50% - 1px); width:2px; height:32px;}
#screen-hub .hr-cm.t{top:-12px;} #screen-hub .hr-cm.b{bottom:-12px;}
#screen-hub .hr-cm.l,#screen-hub .hr-cm.r{top:calc(50% - 1px); height:2px; width:32px;}
#screen-hub .hr-cm.l{left:-12px;} #screen-hub .hr-cm.r{right:-12px;}
/* registration targets in the four corner squares of the margin */
#screen-hub .hr-reg{position:absolute; width:12px; height:12px; border:1px solid var(--d-ink-3); border-radius:50%; pointer-events:none;}
#screen-hub .hr-reg::before,#screen-hub .hr-reg::after{content:''; position:absolute; background:var(--d-ink-3);}
#screen-hub .hr-reg::before{left:-4px; right:-4px; top:5px; height:1px;}
#screen-hub .hr-reg::after{top:-4px; bottom:-4px; left:5px; width:1px;}
#screen-hub .hr-reg.tl{left:3px; top:3px;} #screen-hub .hr-reg.tr{right:3px; top:3px;}
#screen-hub .hr-reg.bl{left:3px; bottom:3px;} #screen-hub .hr-reg.br{right:3px; bottom:3px;}
#screen-hub .hr-frame{grid-area:2/2; position:relative; display:flex; flex-direction:column; min-width:0; border:2px solid var(--d-ink);}
/* the drawing field: the grid, 12 minor to 60 major */
#screen-hub .hr-field{
position:relative; flex:1; display:flex; flex-direction:column; padding:10px 18px 36px;
background-image:
linear-gradient(var(--d-grid-2) 1px,transparent 1px),
linear-gradient(90deg,var(--d-grid-2) 1px,transparent 1px),
linear-gradient(var(--d-grid-1) 1px,transparent 1px),
linear-gradient(90deg,var(--d-grid-1) 1px,transparent 1px);
background-size:60px 60px,60px 60px,12px 12px,12px 12px;
background-position:-1px -1px;
}
#screen-hub .hr-plate{position:relative; flex:none; width:100%; margin:0 auto; height:0;}
/* the corner cells: the footer at the bottom right, the demo's walkthrough line at the bottom left */
#screen-hub .hr-foot,#screen-hub .hr-demo{
position:absolute; bottom:0; z-index:3; margin:0; padding:9px 20px 8px; background:var(--d-paper);
border-top:1px solid var(--d-rule);
font-size:11px; font-weight:700; letter-spacing:.26em; text-transform:uppercase; line-height:1.2; color:var(--d-ink-2);
font-variant:normal;
}
#screen-hub .hr-foot{right:0; border-left:1px solid var(--d-rule);}
#screen-hub .hr-demo{left:0; border-right:1px solid var(--d-rule); letter-spacing:.12em;}
#screen-hub .hr-demo a{color:var(--d-ink); text-decoration:underline; text-underline-offset:3px;}
#screen-hub #hubEmpty{margin:40px auto 0; color:var(--d-ink-2); text-align:center;}
/* ---------- the flange: plate, rim, bolt circle, centre lines ---------- */
#screen-hub .hr-flange{position:absolute; left:0; top:0; z-index:0; overflow:visible; pointer-events:none;}
#screen-hub .hr-flange *{vector-effect:non-scaling-stroke;}
#screen-hub .hr-flange .body{fill:var(--d-paper); fill-rule:evenodd; stroke:none;}
#screen-hub .hr-flange .v{fill:none; stroke:var(--d-ink); stroke-width:var(--d-wv);}
#screen-hub .hr-flange .t{fill:none; stroke:var(--d-rule); stroke-width:var(--d-wt);}
#screen-hub .hr-flange .h{fill:none; stroke:var(--d-ink-3); stroke-width:var(--d-wt); stroke-dasharray:6 4;}
#screen-hub .hr-flange .c{fill:none; stroke:var(--d-ink-3); stroke-width:var(--d-wc); stroke-dasharray:22 4 3 4; stroke-linecap:butt;}
#screen-hub .hr-flange .pc{fill:none; stroke:var(--d-ink-2); stroke-width:1px; stroke-dasharray:26 4 3 4;}
/* ---------- every tile: none of the old card ---------- */
#screen-hub .tile{
margin:0; border:0; border-radius:0; box-shadow:none; min-height:44px;
background:transparent; color:var(--d-ink); font:inherit; font-family:var(--draft);
text-transform:none; letter-spacing:normal; overflow:visible; cursor:pointer; transform:none;
-webkit-tap-highlight-color:transparent;
}
#screen-hub .tile::before{content:none; display:none;}
#screen-hub .tile:hover,#screen-hub .tile:active{background:transparent; transform:none;}
#screen-hub .tile:focus-visible{outline:3px dashed var(--d-focus); outline-offset:4px;}
/* ---------- the bore: the Plant Map, round the rotor ---------- */
#screen-hub .hr-bore{
position:absolute; z-index:1; padding:0; border-radius:50%;
box-shadow:inset 0 0 0 2px var(--d-ink);
}
#screen-hub .hr-bore::after{ /* the chamfer: a thin ring just inside the bore */
content:''; position:absolute; inset:9px; border-radius:50%; border:1px solid var(--d-rule); pointer-events:none;
}
#screen-hub .hr-bore > span{position:absolute; left:0; right:0; display:flex; justify-content:center; pointer-events:none;}
#screen-hub .hr-bore .hr-map{top:5%;}
#screen-hub .hr-bore .hr-fold{width:calc(var(--d) * .37); height:auto; color:var(--d-ink); overflow:visible;}
#screen-hub .hr-bore .hr-hub{top:calc(50% - var(--d) * .1);}
#screen-hub .hr-bore .hr-hubmark{width:calc(var(--d) * .2); height:calc(var(--d) * .2); overflow:visible; color:var(--d-ink);}
#screen-hub .hr-bore .hr-cap{top:64%; flex-direction:column; align-items:center; text-align:center; padding:0 12%;}
#screen-hub .hr-bore .hr-hd{display:block;}
#screen-hub .hr-bore .tn{
display:inline-block; font-size:clamp(17px, calc(var(--d) * .062), 27px); font-weight:800; letter-spacing:.1em;
text-transform:uppercase; line-height:1.15; color:var(--d-ink);
text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:7px;
}
/* no Plant Map for this person: the bore is the mark alone, a drawing */
#screen-hub .hr-bore-mark{cursor:default;}
#screen-hub .hr-bore-mark .hr-hub{top:calc(50% - var(--d) * .2);}
#screen-hub .hr-bore-mark .hr-hubmark{width:calc(var(--d) * .4); height:calc(var(--d) * .4);}
/* picked up: the paper lifts, the rim goes heavy, the rotor turns */
#screen-hub button.hr-bore:focus-visible{background:var(--d-lift); box-shadow:inset 0 0 0 3.5px var(--d-ink); outline-offset:6px;}
#screen-hub button.hr-bore:focus-visible::after{border-color:var(--d-ink); border-width:1.5px;}
#screen-hub button.hr-bore:focus-visible .hr-hubmark .rays{animation:hr-spin 6s linear infinite;}
@media (hover:hover){
#screen-hub button.hr-bore:hover{background:var(--d-lift); box-shadow:inset 0 0 0 3.5px var(--d-ink);}
#screen-hub button.hr-bore:hover::after{border-color:var(--d-ink); border-width:1.5px;}
#screen-hub button.hr-bore:hover .hr-hubmark .rays{animation:hr-spin 6s linear infinite;}
}
#screen-hub .hr-hubmark .rays{transform-origin:256px 256px;}
#screen-hub button.hr-bore:active .hr-cap{transform:translateY(1px);}
/* ---------- a tool: boss + leader + callout, one button ---------- */
#screen-hub .hr-tool{position:absolute; z-index:2; display:block; padding:8px 10px 9px; text-align:left;}
/* view brackets round the callout: off at rest, on when the tool is picked up */
#screen-hub .hr-tool::after{
content:''; position:absolute; inset:-1px; pointer-events:none;
--b:linear-gradient(var(--d-ink),var(--d-ink));
background-image:var(--b),var(--b),var(--b),var(--b),var(--b),var(--b),var(--b),var(--b);
background-repeat:no-repeat;
background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom;
background-size:0 2px,2px 0,0 2px,2px 0,0 2px,2px 0,0 2px,2px 0;
}
#screen-hub .hr-tool:focus-visible::after{background-size:16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px;}
#screen-hub .hr-tool:active .hr-cap{transform:translateY(1px);}
#screen-hub .hr-boss{
position:absolute; border-radius:50%; background:var(--d-paper); display:grid; place-items:center; overflow:hidden;
box-shadow:inset 0 0 0 var(--d-wv) var(--d-ink); color:var(--d-ink);
}
#screen-hub .hr-boss::before{content:''; position:absolute; inset:5px; border-radius:50%; border:1px solid var(--d-rule); pointer-events:none;}
#screen-hub .hr-boss .hr-pt{width:calc(var(--r) * 1.12); height:calc(var(--r) * 1.12); overflow:visible; transition:opacity .15s ease;}
#screen-hub .hr-boss svg.hr-pt.ic{fill:none; stroke:currentColor; stroke-width:1.6;}
/* the badge that spins in the circle (owner, 2026-09-04): the starburst,
edge to edge inside the boss's inner ring, so the ray tips run along it */
#screen-hub .hr-boss .hr-rotor{position:absolute; left:6px; top:6px; width:calc(100% - 12px); height:calc(100% - 12px);
opacity:0; transition:opacity .15s ease; transform-origin:50% 50%; color:var(--d-ink);}
#screen-hub .hr-tool:focus-visible .hr-boss{box-shadow:inset 0 0 0 3.5px var(--d-ink); background:var(--d-lift); outline:3px dashed var(--d-focus); outline-offset:5px;}
#screen-hub .hr-tool:focus-visible .hr-boss .hr-pt{opacity:0;}
#screen-hub .hr-tool:focus-visible .hr-boss .hr-rotor{opacity:1; animation:hr-spin 2.2s linear infinite;}
#screen-hub .hr-lead{position:absolute; left:0; top:0; width:1px; height:1px; overflow:visible; pointer-events:none;}
#screen-hub .hr-lead .ld{fill:none; stroke:var(--d-ink); stroke-width:1px; stroke-linejoin:round;}
#screen-hub .hr-lead .ah{fill:var(--d-ink);}
#screen-hub .hr-tool:focus-visible .hr-lead .ld{stroke-width:2.2px;}
@media (hover:hover){
#screen-hub .hr-tool:hover{background:var(--d-shade);}
#screen-hub .hr-tool:hover::after{background-size:16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px;}
#screen-hub .hr-tool:hover .hr-boss{box-shadow:inset 0 0 0 3.5px var(--d-ink); background:var(--d-lift);}
#screen-hub .hr-tool:hover .hr-boss .hr-pt{opacity:0;}
#screen-hub .hr-tool:hover .hr-boss .hr-rotor{opacity:1; animation:hr-spin 2.2s linear infinite;}
#screen-hub .hr-tool:hover .hr-lead .ld{stroke-width:2.2px;}
}
@keyframes hr-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:no-preference){
#screen-hub .hr-tool{transition:background-color .15s;}
#screen-hub .hr-tool::after{transition:background-size .18s ease-out;}
#screen-hub .hr-boss{transition:box-shadow .15s, background-color .15s;}
}
/* reduce motion: the starburst still shows in the circle, it does not turn */
@media (prefers-reduced-motion:reduce){
#screen-hub .hr-boss .hr-rotor,#screen-hub .hr-hubmark .rays{animation:none !important;}
}
@media print{ #screen-hub .hr-boss .hr-rotor{display:none;} }
/* the callout: one line, level with the leader's shoulder, which stops just short of
it: the name, then its count, then the safety note (the owner, 2026-10-12: "the text
should be inline with the line that the arrow is, and any extra stuff like that
emergency box"). No description (the same day: it only clouded the page). A line too
long for its box wraps, the name staying on the leader. On the desk's left column
the words stand against their shoulder, on the right. */
#screen-hub .hr-cap{display:block; position:relative;}
#screen-hub .hr-tool .hr-hd{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-height:22px;}
#screen-hub .hr-tool.hr-l{text-align:right;}
#screen-hub .hr-tool.hr-l .hr-hd{justify-content:flex-end;}
#screen-hub .hr-tool .tn{
font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.15; color:var(--d-ink);
}
/* ---------- counts: balloons with a word, level with the name ---------- */
#screen-hub .hr-badge{display:flex; align-items:center; gap:5px; flex:none;}
#screen-hub .hr-balloon{
min-width:28px; height:28px; padding:0 2px; border-radius:50%; border:1.7px solid var(--d-ink);
display:grid; place-items:center; background:var(--d-paper); color:var(--d-ink);
font-size:14.5px; font-weight:800; line-height:1; letter-spacing:0;
}
#screen-hub .hr-balloon.wide{width:32px; height:32px; font-size:11px;}
#screen-hub .hr-bw{font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--d-ink-2);}
/* a line too long for its box: the count's word goes before the line breaks
(hubring.js fit) */
#screen-hub .hr-tool.hr-snug .hr-bw{display:none;}
/* ---------- SAFETY: the one note drawn with a double border and section hatching ----------
about a balloon's height, so it stands on the name's line beside the count */
#screen-hub .hr-safety{
display:inline-flex; align-items:stretch; flex:none;
border:2px solid var(--d-red); outline:1px solid var(--d-red); outline-offset:-4.5px;
padding:4.5px; background:var(--d-paper);
}
#screen-hub .hr-safety .hx{width:8px; margin-right:3px; background:repeating-linear-gradient(-45deg,var(--d-red) 0 1.5px,transparent 1.5px 4.5px);}
#screen-hub .hr-safety .sw{
background:var(--d-red); color:var(--d-red-ink); padding:2px 5px 2px 4px; white-space:nowrap;
font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:1.2;
}
/* ---------- fewer tools, larger lettering (the desk only) ---------- */
#screen-hub .hr-sheet.hr-few:not(.hr-dev) .hr-tool .hr-hd{min-height:26px;}
#screen-hub .hr-sheet.hr-few:not(.hr-dev) .hr-tool .tn{font-size:18px;}
#screen-hub .hr-sheet.hr-some:not(.hr-dev) .hr-tool .tn{font-size:15px;}
/* ---------- the desk as a list (D146): each boss inside its callout, on the map's
side, the words reading outward; --ti is where the words start (hubring.js) ---------- */
#screen-hub .hr-list .hr-tool{padding:8px 10px 9px var(--ti, 90px);}
#screen-hub .hr-list .hr-tool.hr-l{padding:8px var(--ti, 90px) 9px 10px;}
/* ---------- icons only (.hr-icons): the desk's map view (D147), icons down both edges and the
Plant Map open in a window between them (core/hubmap.js); and the phone's icon ring (D149),
every tool's boss round the Plant Map, all on one screen ----------
No words on the page: a tool's name and counts are in its title, for the mouse,
and still in the button for a screen reader (the callout is clipped, not removed). */
#screen-hub .hr-mapview .hr-bore{display:none;}
#screen-hub .hr-sheet.hr-icons .hr-tool{padding:0; min-height:0; border-radius:50%;}
#screen-hub .hr-sheet.hr-icons .hr-tool .hr-lead{display:none;}
#screen-hub .hr-sheet.hr-icons .hr-tool .hr-cap{
position:absolute; left:0; top:0; width:1px; height:1px; margin:-1px; padding:0; border:0;
overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
#screen-hub .hr-sheet.hr-icons .hr-tool::after{inset:-6px;}
/* The Work Queue's icon (the owner: "red for the queue if there is a safety one or orange
if there is an emergency, safety out ranks emergency"). A true red and a true orange, in
both modes: the drawing's own safety colour is a salmon in Cyanotype and its emergency
colour an amber, which side by side read as orange and yellow. Never by colour alone:
safety's rim is hatched, the drawing's mark for SAFETY, and an emergency is a solid fill,
so the two and a plain icon tell apart in greyscale (the red is also the darker). */
#screen-hub{--hr-safe:#ff4f43; --hr-safe-ink:#0a2242; --hr-emerg:#ffa23a; --hr-emerg-ink:#0a2242;}
html[data-theme="light"] #screen-hub{--hr-safe:#c8301b; --hr-safe-ink:#ffffff; --hr-emerg:#e07b00; --hr-emerg-ink:#14263f;}
html[data-print="green"] #screen-hub{--hr-safe-ink:#0b2a1c; --hr-emerg-ink:#0b2a1c;}
#screen-hub .hr-sheet.hr-icons .hr-tool[data-alert="safety"] .hr-boss{
color:var(--hr-safe-ink);
background:
radial-gradient(circle, var(--hr-safe) 0 60%, transparent 61%),
repeating-linear-gradient(-45deg, var(--hr-safe) 0 3px, var(--hr-safe-ink) 3px 5px);
box-shadow:inset 0 0 0 var(--d-wv) var(--hr-safe);
}
#screen-hub .hr-sheet.hr-icons .hr-tool[data-alert="emergency"] .hr-boss{
color:var(--hr-emerg-ink); background:var(--hr-emerg); box-shadow:inset 0 0 0 var(--d-wv) var(--hr-emerg);
}
#screen-hub .hr-sheet.hr-icons .hr-tool[data-alert] .hr-boss .hr-rotor{color:inherit;}
/* the window: a view frame on the sheet, the map's own buttons at its top right */
#screen-hub .hr-mapwin{position:absolute; z-index:1; border:2px solid var(--d-ink); background:var(--d-ground); overflow:hidden;}
#screen-hub .hr-mapwin > .hr-maphost{position:absolute; inset:0;}
#screen-hub .hr-mapwin > .hr-mapacts{
position:absolute; top:8px; right:8px; z-index:20; display:flex;
background:var(--d-paper); border:2px solid var(--d-ink);
}
#screen-hub .hr-mapacts button{
position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px;
margin:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--d-ink); box-shadow:none;
}
#screen-hub .hr-mapacts button + button{border-left:1px solid var(--d-rule);}
#screen-hub .hr-mapacts button:hover{background:var(--d-shade);}
#screen-hub .hr-mapacts button:focus-visible{outline:2px dashed var(--d-focus); outline-offset:-4px;}
#screen-hub .hr-mapacts button svg.ic{width:18px; height:18px;}
/* the map's "machines with no work" switch, drawn as it is on the map's own bar (mod/map.css) */
#screen-hub .hr-mapacts button.plainsw .plainsw-dot{width:14px; height:14px; border-radius:50%; background:var(--pin, var(--accent)); border:2px solid currentColor; box-sizing:border-box;}
#screen-hub .hr-mapacts button.plainsw.is-off::after{content:''; position:absolute; left:8px; right:8px; top:50%; height:2px; background:currentColor; transform:rotate(-45deg); opacity:.9;}
#screen-hub .hr-mapmsg{position:absolute; inset:0; display:grid; place-items:center; padding:20px; text-align:center; color:var(--d-ink-2);}
/* ---------- arranging the tools (D146, core/hubdrag.js) ----------
A tool held to be moved is lifted the way a hovered one is, whatever the
device: the shaded box, its corner brackets and the heavy ring, in front of
the others. No text is selected and no phone menu opens on a long press. */
#screen-hub .hr-tool{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}
#screen-hub .hr-tool.hr-dragging{z-index:6; cursor:grabbing; background:var(--d-shade);}
#screen-hub .hr-tool.hr-dragging::after{background-size:16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px,16px 2.5px,2.5px 16px;}
#screen-hub .hr-tool.hr-dragging .hr-boss{box-shadow:inset 0 0 0 3.5px var(--d-ink); background:var(--d-lift);}
#screen-hub .hr-tool.hr-dragging .hr-lead .ld{stroke-width:2.2px;}
#screen-hub .hr-sorting{cursor:grabbing;}
#screen-hub .hr-sorting .hr-tool:not(.hr-dragging){pointer-events:none;}
/* ---------- the developed strip (phone, tablet) ---------- */
#screen-hub .hr-dev .hr-tool{padding:9px 6px 10px 86px;}
#screen-hub .hr-dev .hr-tool .tn{font-size:13px; letter-spacing:.05em;}
#screen-hub .hr-dev .hr-demo{position:static; align-self:center; margin:12px 0 0; border:1px solid var(--d-rule); text-align:center;}
/* ---------- phone: a narrower margin ---------- */
@media (max-width:639px){
#screen-hub .hr-trim{padding:8px;}
#screen-hub .hr-crop{width:8px; height:8px;}
#screen-hub .hr-crop.tl::before,#screen-hub .hr-crop.tr::before{top:7px; width:5px;}
#screen-hub .hr-crop.bl::before,#screen-hub .hr-crop.br::before{bottom:7px; width:5px;}
#screen-hub .hr-crop.tl::after,#screen-hub .hr-crop.bl::after{left:7px; height:5px;}
#screen-hub .hr-crop.tr::after,#screen-hub .hr-crop.br::after{right:7px; height:5px;}
#screen-hub .hr-sheet{grid-template-columns:13px minmax(0,1fr) 13px; grid-template-rows:13px minmax(0,1fr) 13px;}
#screen-hub .hr-zone{font-size:7.5px;}
#screen-hub .hr-reg{width:8px; height:8px;}
#screen-hub .hr-reg::before{top:3px; left:-2px; right:-2px;}
#screen-hub .hr-reg::after{left:3px; top:-2px; bottom:-2px;}
#screen-hub .hr-reg.tl,#screen-hub .hr-reg.bl{left:2px;}
#screen-hub .hr-reg.tr,#screen-hub .hr-reg.br{right:2px;}
#screen-hub .hr-reg.tl,#screen-hub .hr-reg.tr{top:2px;}
#screen-hub .hr-reg.bl,#screen-hub .hr-reg.br{bottom:2px;}
#screen-hub .hr-cm.t,#screen-hub .hr-cm.b{height:22px;} #screen-hub .hr-cm.t{top:-8px;} #screen-hub .hr-cm.b{bottom:-8px;}
#screen-hub .hr-cm.l,#screen-hub .hr-cm.r{width:22px;} #screen-hub .hr-cm.l{left:-8px;} #screen-hub .hr-cm.r{right:-8px;}
/* the words want the width: at 390 the Work Queue, its count and its safety note hold one line */
#screen-hub .hr-field{padding:12px 4px 46px;}
#screen-hub .hr-foot{padding:8px 14px 7px; font-size:10px;}
}