:root {
    --s1: #f3982d; --s2: #dc5800;
    --sHV: rgba(243,152,45,0.3);
    --sC: #000;
    --cB: #393939; --cBB: #555;
    --cO: rgba(0,0,0,0.2);
    --cBD: rgba(0,0,0,0);
    --cF: #666; --cFT: black;
    --cS: black;
    --cOT: #CCC; --cLT: #777;
    --cSS: #AAA;
    --cAV: #FFF; --cHV: #444;
    --cD: #f00; --cFind: #8a009d;
    --cI: #666; --cIB: #90d3e4;
    --cIS: #327496;
    --cIA: transparent;
    --revealSec: 0.1s;
    --hudWidth: 100px;
    --stdWidth: 100px;
    --miniWidth: 60px;
    --topicDim: 120px;
    --fieldX: 200px; --fieldY: 200px;
    --fieldW: 400px; --fieldH: 247px;
    --CPB: url(#ctxpat);
    --ctxX: 200px; --ctxY: 200px;
    --ctxW: 200px; --ctxMaxW: 300px; --ctxH: 200px;
    --ctxPadH: 20px; --ctxPadV: 8px;
    --paneW: 20vw; --paneH: 75vh;
    --avatarDim: 80px; --accountWidth: 300;
    --boxMargin: 10px; --accountHeight: calc(var(--avatarDim) + var(--boxMargin) * 2);
    --accRx: 20px;
    --hudOff: 20px;
    --hudMiniOff: 10px;
    --arrowWidth: 30; --arrowHeight: 15;
    --arrowThick: 3; --itemHeight: 50;
    --itemCount: 2;
    --menuHeight: calc(var(--itemHeight) * var(--itemCount) + 20);
    --viewW: 0; --viewH: 0;
    --dlgMW: 0px; --dlgW: 0px;
    --dlgMH: 0px;
    --auraDim: 100px;
    --dgtRad: 10px;
    --navSide: 2000;
    --hudSide: 50;
    --miniSide: 35;
    --selW: 0;
    --selH: 0;
    --imgMid: 64px;
}

html, body, .fs {
    width: 100vw;
    width: -webkit-fill-available;
    height: 100vh;
    height: -webkit-fill-available;
}
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

a {
    text-decoration: underline;
    cursor: pointer;
}
text a {
    fill: var(--s1);
}

.editor {
    background-color: var(--cB);
    touch-action: none; /* Chromium */
    overflow: hidden; /* Firefox FIXME */
}

.editor > svg {
    z-index: -1;
}

.fields > .edit {
    position: absolute;
    left: var(--fieldX);
    top: var(--fieldY);
}

.fields > .edit > span {
    display: block;
    color: var(--s1);
}
html[dir='LTR'] .fields > .edit > span {
    text-align: right;
}
html[dir='RTL'] .fields > .edit > span {
    text-align: left;
}

.fields input, .fields > .edit > div {
    width: var(--fieldW);
}
.fields > .edit > div {
    max-height: 300px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.fields > .edit > div > div {
    width: var(--fieldW);
    cursor: pointer;
    background-color: #fff;
    padding: 1px 2px;
    border-bottom: 1px inset var(--s2);
}
.fields > .edit > div > div.active {
    background-color: var(--s2) !important;
}
.fields > .edit > div > div:hover {
    background-color: #e9e9e9;
}

.fields > nav.ctx {
    position: absolute;
    left: var(--ctxX);
    top: var(--ctxY);
    width: var(--ctxW);
    height: var(--ctxH);
    background-color: var(--cO);
    z-index: 1;
}

.fields > nav > ul {
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    list-style: none;
}
.fields > nav > ul > li {
    display: block;
    padding: var(--ctxPadV) var(--ctxPadH);
}
.fields > nav > ul > li > span {
    color: var(--cOT);
}
.fields > nav > ul > li:not(.sep):hover {
    background-color: var(--s2);
}

/* FIXME Messes with width of link autocompleter
 * And probably doesn't work in firefox... */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: var(--s1);
}

/* TODO FIXME Consolidate with input above? */
.fields textarea {
    width: var(--fieldW);
    height: var(--fieldH);
    resize: none;

    background-color: var(--cO);
    color: var(--s1);
    border: none;
}

html[dir='LTR'] .fields textarea {
    border-left: 4px solid var(--s2);
    padding-left: 5px;
}
html[dir='RTL'] .fields textarea {
    border-right: 4px solid var(--s2);
    padding-right: 5px;
}

.fields textarea:focus {
    outline: none;
}

html[dir='LTR'] .fields textarea:focus {
    border-left-color: var(--s1);
}
html[dir='RTL'] .fields textarea:focus {
    border-right-color: var(--s1);
}


html[dir='LTR'] .fields .edit.finder {
    left: calc(var(--hudOff) + var(--boxMargin));
}
html[dir='LTR'] .fields .edit.finder.mini {
    left: calc(var(--hudMiniOff) + var(--boxMargin));
}
html[dir='RTL'] .fields .edit.finder {
    right: calc(var(--hudOff) + var(--boxMargin));
}
html[dir='RTL'] .fields .edit.finder.mini {
    right: calc(var(--hudMiniOff) + var(--boxMargin));
}

.fields .edit.finder {
    top: calc(var(--hudOff) + var(--boxMargin) + 1.3em);
}
.fields .edit.finder.mini {
    top: calc(var(--hudMiniOff) + var(--boxMargin) + 1.3em);
}
.fields .edit.finder input {
    width: calc(var(--accountWidth) * 1px - var(--hudMiniOff) * 2);
}

text, .noslct {
    user-select: none;
}

.ct {
    text-align: center;
}
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.wrap{
    flex-wrap: wrap;
}
.gap5 {
    gap: 5px;
}
.gap10 {
    gap: 10px;
}

.fbreak {
    flex-basis: 100%;
    height: 0;
}

.menulist {
    padding: 0;
}

.pane-ctx {
    position: absolute;
    top:0;
    overflow: hidden;
    user-select: none;

    color: var(--cOT);
    background-color: var(--cO);
}
html[dir='LTR'] .pane-ctx {
    right:0;
    border-bottom-left-radius: 40px;
}
html[dir='RTL'] .pane-ctx {
    left:0;
    border-bottom-right-radius: 40px;
}

.pane-ctx a {
    color: var(--cOT);
}

.pane-ctx > .area {
    display: flex;
    flex-direction: column;

    width: var(--paneW);
    min-width: var(--avatarDim);
    height: var(--paneH);
    overflow: hidden;

    border: 2px solid var(--cBD);
}

.pane-ctx > .area.rsz {
    cursor: w-resize;
    transition: border-color 1s linear;
}

html[dir='ltr'] .pane-ctx > .area.rsz {
    border-left: 2px solid var(--s1);
}
html[dir='rtl'] .pane-ctx > .area.rsz {
    border-right: 2px solid var(--s1);
}

.pane-ctx > .area > .content {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 10px;
}
.pane-ctx > .area > .content > *:not(:first-child) {
    margin-top: 0.5em;
}

.pane-ctx > .area > .footer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-end;

    padding: 0 10px;
}
.pane-ctx > .area > .footer > nav {
    padding: 5px 0;
    font-size: 13px;
}

.pane-ctx > .meta{
    height: 80px;
    border-color: var(--cBD);
}
.pane-ctx > .meta.rsz {
    cursor: s-resize;
    border-bottom: 2px solid var(--s1);
    transition: border-color 1s linear;
}

.pane-ctx > .meta > svg {
    width: var(--avatarDim);
    height: var(--avatarDim);
}
.pane-ctx > .meta > svg > path {
    stroke-width: 4;
    /* TODO FIXME Avatar or descriptive pattern */
    fill: var(--CPB);
}
.pane-ctx > .meta.cancel > svg > path {
    fill: url(#cancelpat);
}

html[dir='LTR'] .pane-ctx > .meta > svg > path {
    stroke-dasharray: 0,160,160;
    cursor: sw-resize;
}
html[dir='RTL'] .pane-ctx > .meta > svg > path {
    stroke-dasharray: 0,80,64;
    cursor: se-resize;
}

#ctxpat text {
    fill: white;
    font-size: var(--avatarDim);
    dominant-baseline: middle;
    text-anchor: middle;
}

.pane-ctx > .meta > svg > path:hover {
    stroke: var(--s1);
    animation: meta-stroke 1s ease 0s 1 normal forwards;
}
.pane-ctx > .meta > div {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
}
.pane-ctx > .meta > div > span {
    position: absolute;
    padding: 0 10px;
}
/* TODO FIXME Find a cleaner way of separating lines */
.pane-ctx > .meta > div > span:nth-child(2) {
    margin-block-start: 1.2em;
}
.pane-ctx > .meta > div > span:nth-child(3) {
    margin-block-start: 2.4em;
}

a.hl,
.dialog a.hl,
.pane-ctx > .meta > div > span a {
    color: var(--s1);
}
.pane-ctx > .meta > div > span a:hover {
    cursor: pointer;
}

@keyframes meta-stroke {
    from {
        stroke-opacity: 0;
    }
    to {
        stroke-opacity: 1;
    }
}

.pane-ctx > .content textarea {
    width: 100%;
    box-sizing: border-box;
    height: 6em;
    resize: none;
}

.pane-ctx h2,
.pane-ctx h3,
.pane-ctx h4 {
    margin:0;
    display: flex;
    align-items: center;
}

.pane-ctx h2 > img {
    display: inline;
    width: var(--imgMid);
}
html[dir='ltr'] .pane-ctx h2 > img {
    margin-right: 0.25em;
}
html[dir='rtl'] .pane-ctx h2 > img {
    margin-left: 0.25em;
}

.pane-ctx .field {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

button > * {
    pointer-events: none;
}
.pane-ctx button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}
.pane-ctx button > img {
    vertical-align: middle;
    width: 32px;
}
.pane-ctx button:not(.notxt) > img {
    width: 24px;
}
.pane-ctx .lbl > img {
    width: 24px;
}

blockquote {
    margin: 5px 0;
    padding: 5px 0px;
}
html[dir='ltr'] blockquote {
    border-left: 4px solid var(--s1);
    padding-left: 10px;
}
html[dir='rtl'] blockquote {
    border-right: 4px solid var(--s1);
    padding-right: 10px;
}

table img {
    width: 48px;
}

.field > span {
    display: inline-block;
}
.field > *:not(:first-child) {
    width: 100%;
}

input {
    box-sizing: border-box;
}

input:not([type]),
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"] {
    background: transparent;
    border: 0;
    outline: 0;
    border-bottom: 4px solid var(--s2);

    padding: 0.5em;
    font-size: 1em;
    color: var(--s1);
}
input:not([type='radio']):focus {
    border-bottom: 4px solid var(--s1);
    caret-color: var(--s1);
}

.code_row div.error,
input.error {
    border-bottom: 4px solid var(--cD);
}

input.error.shake {
    position: relative;
    animation: shake .1s linear;
    animation-iteration-count: 3;
}

@keyframes shake {
    0% { left: -5px; }
    100% { right: -5px; }
}

input:not([type]):disabled,
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="search"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled {
    border-bottom: 4px solid var(--cI);
}

select {
    all: unset;
    box-sizing: border-box;
    max-width: 100%;
    color: var(--s1);
    border-bottom: 4px solid var(--s1);
}

select, button:not(.mini) {
    padding: 0.5em 1em;
}

span input {
    width: 100%;
    display: inline-block;
}

input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

span.combo:after {
    position: relative;
    color: var(--s1);
    content: '\25BC';
    font-size: x-small;
    pointer-events: none;
}

html[dir='ltr'] span.combo:after {
    margin-left: -2em;
}
html[dir='rtl'] span.combo:after {
    margin-right: -2em;
}

.pane-ctx .wide {
    box-sizing:border-box;
    width: 100%;
    resize: vertical;
}
.pane-ctx .centre {
    text-align:center;
}

.pane-ctx .mutable:hover {
    border:1px solid var(--cOT);
    cursor:text;
}

.pane-ctx div.fields > div > * {
    vertical-align: middle;
}
.pane-ctx div.fields > table {
    display: inline-block;
    width: 100%;
    max-height: 20em;
    overflow: auto;

    border-collapse: separate;
    border-spacing: 1em 0.3em;
}

.pane-ctx table.props, .pane-ctx table.props td:last-child {
    width: 100%;
}
.pane-ctx table.props td:first-child {
    font-weight: bold;
}

.pane-ctx table.props tr.nav:hover,
.pane-ctx table col.hv {
    background-color: var(--sHV);
}

table.props td > input {
    width: 100%;
}

.pane-ctx table.stats td {
    text-align: center;
    vertical-align: middle;
}

.blur > g:not(.noblur) {
    filter: url(#blur);
}

.veil, .hide {
    display: none!important;
}
.show {
    display: initial!important;
}

.invis {
    visibility: hidden;
}
.invis-ptr {
    pointer-events: none;
}
.invis-ptr * {
    pointer-events: none;
}

ul.inl li {
    display: inline;
}
ul.inl li + li {
    padding-left: 5px;
}

#rcvs.connect, 
#rcvs.imagine.grab,
#rcvs.imagine g.C circle,
#rcvs.imagine g.C rect {
    cursor: grab;
}

#rcvs.imagine.pan,
#rcvs.connect.pan,
#rcvs.imagine g.C circle.move,
#rcvs.imagine g.C rect.move {
    cursor: grabbing;
}

#rcvs.imagine,
#rcvs.connect.draw,
#rcvs.connect g.C * {
    cursor: crosshair;
}

#rcvs.connect g.C text {
    pointer-events: none;
}

g.C.select circle:first-child,
g.C.select rect:first-child {
    stroke: var(--s1);
    stroke-width: 2;
}

#rcvs.imagine g.C:not(.select) circle:first-child,
#rcvs.imagine g.C:not(.select) rect:first-child {
    stroke: var(--s2);
    animation: imagine-stroke 1s linear 0s 2 alternate-reverse;
}

@keyframes imagine-stroke {
    from {
        stroke: black;
    }
    to {
        stroke: var(--s2);
    }
}

polyline {
    fill: none;
    stroke: black;
    stroke-width: 2px;
}
polyline.select {
    stroke: var(--s1);
    stroke-dasharray: 10,20;
}

g.C circle {
    stroke: var(--cS);
    stroke-width: 2;
}

g.C circle:not(.avatar) {
    fill: var(--cF);
}

g.C rect {
    fill: var(--cF);
    stroke: var(--cS);
    stroke-width: 2;
}

g.C rect.multi {
    fill: none;
    stroke: var(--s1);
    stroke-width: 1;
}

g.C text {
    fill: var(--cFT);
}

g.C circle,
g.C rect,
g.C > g > path {
    touch-action: none; /* Chromium */
}

g.C > g > path {
    cursor: copy;
    fill: var(--cBB);
    stroke-width: 2;
    stroke: var(--s1);
}

.penLayer > path.meta {
    stroke: var(--s2);
    stroke-width: 2;
    fill: var(--cF);
}

g.C > g > path:hover {
    fill: var(--s2);
}

g.C > g.d > circle {
    /* FIXME More general-purpose var naming */
    fill: var(--cFind);
    r: var(--dgtRad);
}
g.C > g.d > text {
    /* FIXME Variable colour */
    fill: white;
    text-anchor: middle;
    dominant-baseline: central;
}

g.C > g > image {
    width: var(--imgMid);
    x: calc(var(--imgMid) / -2);
    y: calc(var(--imgMid) / -2);
}

g.C > g > image:nth-child(1),
g.C > g > image:nth-child(3) {
    cursor: default;
}
g.C > g > image:nth-child(2) {
    cursor: e-resize;
}
g.C > g > image:nth-child(4) {
    cursor: w-resize;
}

g.C > circle ~ g > image:nth-child(1) {
    transform: translate(0, -100px);
}
g.C > circle ~ g > image:nth-child(2) {
    transform: translate(100px, 0);
}
g.C > circle ~ g > image:nth-child(3) {
    transform: translate(0, 100px);
}
g.C > circle ~ g > image:nth-child(4) {
    transform: translate(-100px, 0);
}

g.C > rect ~ g > image:nth-child(1) {
    transform: translate(calc(var(--selW) / 2), -50px);
}
g.C > rect ~ g > image:nth-child(2) {
    transform: translate(calc(var(--selW) + 50px), calc(var(--selH) / 2));
}
g.C > rect ~ g > image:nth-child(3) {
    transform: translate(calc(calc(var(--selW) / 2)), calc(var(--selH) + 50px));
}
g.C > rect ~ g > image:nth-child(4) {
    transform: translate(-50px, calc(var(--selH) / 2));
}

#rcvs.imagine > .penLayer text {
    cursor: text;
}

g.L line, g.L path:nth-of-type(2) {
    cursor: cell;

    stroke: var(--sC);
    stroke-width: 2;
    fill:none;
    marker-end: url(#linkArrowR);
}
g.L.find line, g.L.find path:nth-of-type(2) {
    stroke-dasharray: 20;
    stroke: var(--cFind);
}

g.L path:nth-of-type(2).flip {
    marker-end: none;
    marker-start: url(#linkArrowR);
}

g.L.bi line, g.L.bi path:nth-of-type(2) {
    marker-end: none;
}
g.L line.selected, g.L path:nth-of-type(2).selected {
    stroke: var(--s1);
    marker-end: url(#activeLinkArrowR);
}
g.L path:nth-of-type(2).selected.flip {
    marker-end: none;
    marker-start: url(#activLinkArrowR);
}

g.L.bi line.selected, g.L.bi path:nth-of-type(2).selected {
    marker-end: none;
}
g.L.bi text {
    text-anchor: middle;
}

g.L line.draw {
    pointer-events: none;
}

g.L path:nth-of-type(1) {
    stroke: transparent;
    stroke-width: 10;
    stroke-linecap: round;
    fill: none;
}

g.L path:hover:nth-of-type(1) {
    cursor: cell;
    stroke: var(--s2);
    stroke-opacity: 0.2;
}

g.L text {
    fill: var(--cLT);
}

textPath.hop > tspan {
    dominant-baseline: middle;
    text-anchor: middle;
    fill: var(--cFind);
}

.hex {
    cursor: pointer;
}

polygon.hex {
    fill: inherit;
    stroke: inherit;
    stroke-width: inherit;
    stroke-opacity: inherit;
    stroke-dasharray: inherit;
    stroke-linecap: inherit;
    stroke-linejoin: inherit;
}

g.hex.hub use {
    fill: url(#hubpat);
}
g.hex.hub.edit use {
    fill: url(#newpat);
}

g.hex.hub.hover use {
}

g.hex use {
    stroke: var(--sC);
    stroke-opacity: 1.0;
    fill: var(--cF);
}
g.public > g.hex:not(.hub) use {
    fill: url(#pubpat);
}
g.private > g.hex:not(.hub) use {
    fill: url(#prvpat);
}

g.hex.hover use {
    fill: var(--s2);
}

g.hex.selected use {
    stroke: var(--s1);
}
g.hex:hover use {
    stroke: var(--s2);
}

g.public > g.hex use {
    stroke-width: 75;
    stroke-opacity: 1.0;
    stroke-dasharray: 500,800;
    stroke-linecap: round;
    stroke-linejoin: round;
}
g.private > g.hex use {
    stroke-width: 50;
}

.hudLayer > .account {
    cursor: default;
}

html[dir='LTR'] .hudLayer > .account {
    transform: translate(var(--hudOff), var(--hudOff));
}
html[dir='RTL'] .hudLayer > .account {
    transform: translate(calc((var(--viewW) - var(--accountWidth)) * 1px - var(--hudOff)), var(--hudOff));
}

html[dir='LTR'] .hudLayer.mini > .account,
html[dir='LTR'] .hudLayer.shrt > .account {
    transform: translate(var(--hudMiniOff), var(--hudMiniOff));
}
html[dir='RTL'] .hudLayer.mini > .account,
html[dir='RTL'] .hudLayer.shrt > .account {
    transform: translate(calc((var(--viewW) - var(--accountWidth)) * 1px - var(--hudMiniOff)), var(--hudMiniOff));
}

/* Negate the positioning of the clipped text */
/* With avatar */
html[dir='LTR'] .hudLayer > .account > clipPath {
    transform: translate(calc(-1 * (var(--avatarDim) + var(--boxMargin) * 2)), calc(-1 * var(--boxMargin)));
}
html[dir='RTL'] .hudLayer > .account > clipPath {
    transform: translate(calc(-1 * (var(--accountWidth) * 1px - var(--avatarDim) - var(--boxMargin) * 2)), calc(-1 * var(--boxMargin)));
}
/* Without avatar */
html[dir='LTR'] .hudLayer > .account.finder > clipPath {
    transform: translate(calc(-2 * var(--boxMargin)), calc(-1 * var(--boxMargin)));
}
html[dir='RTL'] .hudLayer > .account.finder > clipPath {
    transform: translate(calc(-1 * (var(--accountWidth) * 1px - var(--boxMargin) * 2)), calc(-1 * var(--boxMargin)));
}

.hudLayer > .account > rect,
.hudLayer > .account > clipPath > rect {
    width: calc(var(--accountWidth) * 1px);
    height: var(--accountHeight);
    rx: var(--accRx);
    fill: var(--cO);
}
.hudLayer > .account > g {
    transform: translateY(var(--accountHeight));
}

.hudLayer > g.account > circle {
    r: calc(var(--avatarDim) / 2);
}

.hudLayer circle.avatar {
    fill: url(#avpat);
}

.hudLayer > g.account > circle.find {
    fill: url(#findpat);
}

pattern.nav image,
pattern.nav rect {
    /*
    x: calc(0.13397096px * var(--navSide));
    y: 0;
    width: calc(1.73205808px * var(--navSide));
    height: calc(1.73205808px * var(--navSide));
    */
    x:0;
    y:calc(-0.13397096px * var(--navSide));
    width: calc(2px * var(--navSide));
    height: calc(2px * var(--navSide));
}

pattern.nav image.pale {
    opacity: 0.1;
}
pattern.nav rect {
    fill: var(--cF);
}

.hudLayer image.control,
.hudLayer > defs > pattern.control > svg {
    width: calc(2.49px * var(--hudSide));
    height: calc(2.49px * var(--hudSide));
}

.hudLayer > defs > pattern.control {
    color: var(--cIA);
}
.hudLayer > defs > pattern.control.active {
    color: var(--cIS);
}

.hudLayer image.context {
    width: calc(2px * var(--hudSide));
    height: calc(2px * var(--hudSide));
}
.hudLayer image.control,
.hudLayer svg.control {
    y:calc(-0.33px * var(--hudSide));
}
.hudLayer image.context {
    y:calc(-0.13397096px * var(--hudSide));
}

.hudLayer.shrt image.control,
.hudLayer.shrt svg.control,
.hudLayer.mini image.control,
.hudLayer.mini svg.control,
.hudLayer.mini image.context {
    width: calc(2.18px * var(--miniSide));
    height: calc(2.18px * var(--miniSide));
}

.hudLayer.shrt image.control,
.hudLayer.shrt svg.control,
.hudLayer.mini image.control,
.hudLayer.mini svg.control {
    x: 0px;
    y: calc(-0.13397096px * var(--miniSide));
}
.hudLayer.mini image.context {
    x: 0px;
}
.hudLayer.shrt image.context {
    width: calc(2px * var(--miniSide));
    height: calc(2px * var(--miniSide));
    y: calc(-0.13397096px * var(--miniSide));
}

/* Left-hand mini button image needs special offset */
.hudLayer.mini image.control.lh,
.hudLayer.mini svg.control.lh {
    x: -15px;
}

pattern.avatar, image.avatar, img.avatar {
    x: 0px;
    y: 0px;
    width: var(--avatarDim);
    height: var(--avatarDim);
}

pattern.topic, image.topic {
    x: 0px;
    y: 0px;
    width: var(--topicDim);
    height: var(--topicDim);
}

label > img.avatar {
    clip-path: circle(closest-side);
}

.corner img:not(.avatar) {
    width: 70px;
}

.avatar.int:hover,
.corner.int:hover {
    filter: url(#shadow);
}

label.corner {
    position: absolute;
    top: 0;
}

html[dir='LTR'] label.corner {
    right: 0;
}
html[dir='RTL'] label.corner {
    left: 0;
}

.dialog form > div:not(:first-child) {
    margin-top: 1em;
}

.dialog form > input.avatar {
    display: none;
}

.dialog footer {
    margin-top: 2em;
    font-size: 13px;
}

g.C > circle.find {
    fill: var(--cFind);
}

.hudLayer > .account > circle {
    cursor: grab;
    cy: calc(var(--avatarDim) / 2 + var(--boxMargin));
}
html[dir='LTR'] .hudLayer > .account > circle {
    cx: calc(var(--avatarDim) / 2 + var(--boxMargin));
}
html[dir='RTL'] .hudLayer > .account > circle {
    cx: calc(var(--accountWidth) * 1px - var(--avatarDim) / 2 - var(--boxMargin));
}
.hudLayer > .account > circle.drag {
    cursor: grabbing;
}
.hudLayer > .account > text {
    dominant-baseline: hanging;
    fill: var(--cOT);
    pointer-events: none;
}
html[dir='LTR'] .hudLayer > .account > text.account {
    transform: translate(calc(var(--avatarDim) + var(--boxMargin) * 2), var(--boxMargin));
}
html[dir='RTL'] .hudLayer > .account > text.account {
    transform: translate(calc(var(--accountWidth) * 1px - var(--avatarDim) - var(--boxMargin) * 2), var(--boxMargin));
}
.hudLayer > .account > text > tspan {
    dominant-baseline: hanging; /* Required by Safari */
}

tspan.error {
    fill: var(--cD);
}

.hudLayer > .account > polygon {
    fill: var(--cOT);
}
html[dir='LTR'] .hudLayer > .account > polygon {
    transform: translate(calc(var(--accountWidth) * 1px - var(--boxMargin) - var(--arrowWidth) * 1px), calc(var(--accountHeight) - var(--boxMargin) - var(--arrowHeight) * 1px));
}
html[dir='RTL'] .hudLayer > .account > polygon {
    transform: translate(var(--boxMargin), calc(var(--accountHeight) - var(--boxMargin) - var(--arrowHeight) * 1px));
}

.hudLayer > .account > rect:hover ~ text,
.hudLayer > .account > rect:hover ~ polygon,
.hudLayer > .account > polygon:hover ~ text,
.hudLayer > .account > polygon:hover,
.hudLayer > .account > text.account:hover {
    fill: var(--s1);
}

.hudLayer > .account > rect.menu {
    animation: menu var(--revealSec) linear 0s 1 normal forwards;
}
@keyframes menu {
    0% {
        height: var(--accountHeight);
    }
    100% {
        height: calc(var(--accountHeight) + var(--menuHeight) * 1px);
    }
}

.hudLayer > .account > g.menu > g.item {
    cursor: pointer;
}
.hudLayer > g.account > g.menu > g.item:nth-child(2) {
    transform: translateY(calc(var(--itemHeight) * 1px));
}
.hudLayer > g.account > g.menu > g.item:nth-child(3) {
    transform: translateY(calc(var(--itemHeight) * 2px));
}
.hudLayer > g.account > g.menu > g.item:nth-child(4) {
    transform: translateY(calc(var(--itemHeight) * 3px));
}
.hudLayer > g.account > g.menu > g.item:nth-child(5) {
    transform: translateY(calc(var(--itemHeight) * 4px));
}

.hudLayer > .account > g.menu > g.item > rect {
    width: calc(var(--accountWidth) * 1px);
    height: calc(var(--itemHeight) * 1px);
    stroke: var(--s2);
    stroke-width: 0.5px;
    stroke-dashArray: calc(var(--accountWidth) * 1px), calc((var(--accountWidth) + var(--itemHeight) * 2) * 1px );
    fill: var(--cBD);
}
.hudLayer > .account > g.menu > g.item:last-child > rect {
    stroke-dashArray: calc(var(--accountWidth) * 1px), calc(var(--itemHeight) * 1px);
}
.hudLayer > .account > g.menu > g.item > rect:hover ~ text {
    fill: var(--s1);
}

.hudLayer > .account > g.menu > g.item > text {
    dominant-baseline: middle;
    fill: var(--cOT);
    cursor: pointer;
}
html[dir='LTR'] .hudLayer > .account > g.menu > g.item > text {
    transform: translate(var(--boxMargin), 25px);
}
html[dir='RTL'] .hudLayer > .account > g.menu > g.item > text {
    transform: translate(calc(var(--accountWidth) * 1px - var(--boxMargin)), 25px);
}
.hudLayer > .account > g.menu > g.item > text:hover,
.hudLayer > .account > g.menu > g.item.focus > text {
    fill: var(--s1);
}

.hudLayer > .account.finder > circle:not(.slider),
.hudLayer > .account.finder > polygon,
.hudLayer > .account.finder > text.account {
    display: none;
}

.hudLayer > .account.finder > g.slider {
    stroke: var(--cAV);
    fill: none;
}

/* TODO FIXME Might be able to get rid of the dir specialisation */
html[dir='LTR'] .hudLayer > .account.finder > g.slider,
html[dir='RTL'] .hudLayer > .account.finder > g.slider {
    transform: translate(0, var(--boxMargin));
}

.hudLayer > .account.finder > g > rect {
    x: var(--boxMargin);
    rx: calc(var(--avatarDim) / 2);
    ry: calc(var(--avatarDim) / 2);
    width: calc(var(--accountWidth) * 1px - var(--boxMargin) * 2);
    height: var(--avatarDim);
}
html[dir='LTR'] .hudLayer > .account.finder > g > circle {
    transform: translate(calc(var(--accountWidth) * 1px - var(--avatarDim) / 2 - var(--boxMargin)), calc(var(--avatarDim) / 2));
}

html[dir='RTL'] .hudLayer > .account.finder > g > circle {
    transform: translate(calc(var(--boxMargin) + var(--avatarDim) / 2), calc(var(--avatarDim) / 2));
}

html[dir='LTR'] .hudLayer > .account > text.finder {
    transform: translate(var(--boxMargin), var(--boxMargin));
}
html[dir='RTL'] .hudLayer > .account > text.finder {
    transform: translate(calc(var(--accountWidth) * 1px - var(--boxMargin)), var(--boxMargin));
}

#rcvs.nav svg.penLayer {
    display: none;
}

#rcvs.nav g.controls:not(.max):not(.profile) {
    display: none;
}
#rcvs.nav g.controls.max g.buttons,
#rcvs.nav g.controls.profile g.buttons {
    display: none;
}

.hudLayer > g.controls.profile > g.hex {
    transform: translate(0px,0px);
}
.hudLayer.mini > g.controls.profile > g.hex {
    transform: translate(60px,-10px);
}

html[dir='LTR'] .hudLayer:not(.mini) > g.controls.max > g.hex {
    transform: translate(60px,-54px) scale(2.2,2.2);
}
html[dir='RTL'] .hudLayer:not(.mini) > g.controls.max > g.hex {
    transform: translate(-60px,-54px) scale(2.2,2.2);
}
html[dir='LTR'] .hudLayer:not(.mini) > g.controls.undo.max:not(.select) > g.hex {
    transform: translate(150px,-54px) scale(2.2,2.2);
}
html[dir='RTL'] .hudLayer:not(.mini) > g.controls.undo.max:not(.select) > g.hex {
    transform: translate(-150px,-54px) scale(2.2,2.2);
}
html[dir='LTR'] .hudLayer:not(.mini) > g.controls.anim.max > g.hex {
    transform: translate(300px,-54px) scale(2.2,2.2);
}
html[dir='RTL'] .hudLayer:not(.mini) > g.controls.anim.max > g.hex {
    transform: translate(-300px,-54px) scale(2.2,2.2);
}
html[dir='LTR'] .hudLayer.shrt:not(.mini) > g.controls.max > g.hex {
    transform: translate(45px,-35px) scale(2.2,2.2);
}
html[dir='RTL'] .hudLayer.shrt:not(.mini) > g.controls.max > g.hex {
    transform: translate(-45px,-35px) scale(2.2,2.2);
}
html[dir='LTR'] .hudLayer.shrt:not(.mini) > g.controls.undo.max:not(.select) > g.hex {
    transform: translate(90px,-35px) scale(2.2,2.2);
}
html[dir='RTL'] .hudLayer.shrt:not(.mini) > g.controls.undo.max:not(.select) > g.hex {
    transform: translate(-90px,-35px) scale(2.2,2.2);
}
html[dir='LTR'] .hudLayer.shrt:not(.mini) > g.controls.anim.max > g.hex {
    transform: translate(180px,-35px) scale(2.2,2.2);
}
html[dir='RTL'] .hudLayer.shrt:not(.mini) > g.controls.anim.max > g.hex {
    transform: translate(-180px,-35px) scale(2.2,2.2);
}

html .hudLayer.mini > g.controls.max > g.hex {
    transform: translate(calc(var(--viewW) * 0.5px),-35px) scale(2.2,2.2);
}

.hudLayer > g.controls > g.hex > use {
    fill: var(--s1);
    stroke-width: 3;
}

.hudLayer > g.controls.max > g.buttons {
    display: none;
}
.hudLayer > g.controls > g.buttons polygon {
    stroke: var(--s1);
    stroke-width: 2;
}

.hudLayer > g.controls > g.buttons polygon.act:hover,
.hudLayer > g.controls > g.buttons polygon.selected {
    stroke-width: 4;
}

.hudLayer > g.controls > g > polygon.bar,
.hudLayer > g.controls > g > rect.bar {
    stroke: var(--s1);
    stroke-width: 2;
    fill: var(--cIB);
    opacity: 0.2;
}

g.controls > g > g > use {
    stroke: var(--s1);
    stroke-width: 2;
    fill: var(--cHV);
}
g.controls > g > g.select > use {
    /*fill: var(--s2);*/
    stroke-width: 8;
}

g.controls > g > g.draw > use {
    fill: url(#drawpat);
}
g.controls > g > g.action > use {
    fill: url(#actpat);
}
g.controls > g > g.series > use {
    fill: url(#seriespat);
}

g.controls > g > g.series.play > use {
    fill: url(#playpat);
}
g.controls > g > g.series.pause > use {
    fill: url(#pausepat);
}


#rcvs:not(.mutable) svg:not(.mini) > g > g.modeBar > g:nth-child(3) {
    display: none;
}

html[dir='LTR'] g.modeBar > g:nth-child(3) > use {
    transform: translateX(calc(var(--hudWidth) * 3/2));
}
html[dir='RTL'] g.modeBar > g:nth-child(3) > use {
    transform: translateX(calc(var(--hudWidth) * -3/2));
}
html[dir='LTR'] g.modeBar > g:nth-child(4) > use,
html[dir='LTR'] svg:not(.mini) > g > g.seriesBar {
    transform: translateX(calc(var(--hudWidth) * 3));
}
html[dir='RTL']  g.modeBar > g:nth-child(4) > use,
html[dir='RTL'] svg:not(.mini) > g > g.seriesBar {
    transform: translateX(calc(var(--hudWidth) * -3));
}

svg.mini > g > g.seriesBar {
    transform: translateX(calc(var(--viewW) * 0.5px));
}

g.seriesBar > g:nth-child(2) > use {
    transform: translateY(calc(var(--hudWidth) * -1));
    fill: url(#listpat);
}
g.seriesBar > g:nth-child(3) > use {
    transform: translateY(calc(var(--hudWidth) * -2));
}
g.controls > g.seriesBar.del > g:nth-child(3) > use {
    fill: url(#delpat);
}
g.controls > g.seriesBar.rem > g:nth-child(3) > use {
    fill: url(#rempat);
}
g.controls > g.seriesBar.penrem > g:nth-child(3) > use {
    fill: url(#penrempat);
}

g.seriesBar > rect.bar {
    transform: scaleY(-1);
}

g.seriesBar > rect.bar {
    height: calc(var(--hudWidth) * 2);
}
g.seriesBar.ro > rect.bar {
    height: var(--hudWidth);
}

g.seriesBar.ro > g:nth-child(3) > use,
#rcvs:not(.mutable) g.seriesBar > g:nth-child(3) > use {
    display: none;
}

html[dir='LTR'] .showBHUD {
    animation: showL var(--revealSec) linear 0s 1 normal forwards;
}
html[dir='RTL'] .showBHUD {
    animation: showR var(--revealSec) linear 0s 1 normal forwards;
}
html[dir='LTR'] .hideBHUD {
    animation: hideL var(--revealSec) linear 0s 1 normal forwards;
}
html[dir='RTL'] .hideBHUD {
    animation: hideR var(--revealSec) linear 0s 1 normal forwards;
}
@keyframes showL {
    100% {
        transform: translateX(calc(-1 * var(--hudWidth)));
    }
}
@keyframes hideL {
    0% {
        transform: translateX(calc(-1 * var(--hudWidth)));
    }
    100% {
        transform: translateX(0px);
        visibility: hidden;
    }
}

html[dir='LTR'] .showFHUD {
    animation: showR var(--revealSec) linear 0s 1 normal forwards;
}
html[dir='RTL'] .showFHUD {
    animation: showL var(--revealSec) linear 0s 1 normal forwards;
}
html[dir='LTR'] .hideFHUD {
    animation: hideR var(--revealSec) linear 0s 1 normal forwards;
}
html[dir='RTL'] .hideFHUD {
    animation: hideL var(--revealSec) linear 0s 1 normal forwards;
}
@keyframes showR {
    100% {
        transform: translateX(var(--hudWidth));
    }
}
@keyframes hideR {
    0% {
        transform: translateX(var(--hudWidth));
    }
    100% {
        transform: translateX(0px);
        visibility: hidden;
    }
}

/* Search */
g.C.query circle {

}
g.C.result circle {
    stroke-dasharray: 10,10;
}

/* TODO FIXME */
.prop-rg2, .prop-rg3 {
    display: flex;
    border:1px solid var(--s1);
    flex-wrap: wrap;
}
.prop-pair input:not(:first-child) {
    width: 4em;
}

.prop-rg2 > label {
    flex: 0 0 50%;
    max-width: 50%;
}
.prop-rg3 > label {
    flex: 1 0 33.333%;
}

.prop-rg2 > label svg,
.prop-rg3 > label svg {
    vertical-align: middle;
    width: 32px;
}

.prop-rg2:not(.mini) > label svg,
.prop-rg3:not(.mini) > label svg {
    width: 24px;
}

.prop-rg2 > label > [type="radio"],
.prop-rg3 > label > [type="radio"] {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    /* Appearance seems more appropriate; yet, only display:none seems to be effective on iOS */
    display:none;
    margin:0;
}

.prop-rg2 > label > [type="radio"] + div,
.prop-rg3 > label > [type="radio"] + div {
    display:inline-flex;
    box-sizing:border-box;
    text-align:center;
    padding:1em 0em;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    width: 100%;
    min-height: 100%;
}

.prop-rg2.mini span,
.prop-rg3.mini span,
button.notxt > span {
    display: none;
}

:checked + div {
    background:var(--s1);
    color: var(--sC);
    padding: 1em 0;
}

ol.timeln {
    max-height: calc(var(--paneH) - 160px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    list-style: none;
}

ol.timeln li {
    margin-top: 1em;
}

ol.timeln li:before {
    content:'';
    background: var(--s2);

    position: relative;
    display: inline-block;
    width:2px;
    height:10px;
    padding: 0;
}
html[dir='ltr'] ol.timeln li:before {
    transform:translate(16px, -18px);
}
html[dir='rtl'] ol.timeln li:before {
    transform:translate(-16px, -18px);
}

ol.timeln li:first-child:before {
    content: '';
    background: none;

    display: block;
    width: 3px;
    height: 3px;

    border: solid var(--s2);
    border-width: 0 2px 2px 0;
    padding: 3px;
}
html[dir='ltr'] ol.timeln li:first-child:before {
    transform: translateX(9px) rotate(-135deg);
}
html[dir='rtl'] ol.timeln li:first-child:before {
    transform: translateX(-9px) rotate(-135deg);
}

ol.timeln input {
    display: inline-grid;
    place-content: center;

    -webkit-appearance:none;
    -moz-appearance:none;
    appearance: none;
    width: 1.5em;
    height: 1.5em;
    border: 0.15em solid var(--s2);
    border-radius: 50%;
    margin: 0 5px;
}

ol.timeln input::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background: var(--s1);
  box-shadow: inset 1em 1em var(--s1);
}

ol.timeln input:checked::before {
    transform: scale(1);
}

#overlay {
    background-color: var(--cO);
}
.dialog.show, #overlay {
    position: absolute;
    left: 0;
    top: 0;
}

.dialog,
.dialog a {
    color: var(--cOT);
}

#sub_opts > button {
    color: var(--cOT);
    margin: 0;
}
#sub_opts ul {
    text-align: start;
}

html[dir='ltr'] #sub_opts ul {
    margin: 0 auto auto 0;
}
html[dir='rtl'] #sub_opts ul {
    margin: 0 0 auto auto;
}

.dialog > .window {
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    min-width: var(--dlgMW);
    width: var(--dlgW);
    min-height: var(--dlgMH);

    border-radius: 40px;
    background-color: var(--cO);
}

.dialog > .window.shrink {
    height: 80%;
}

.dialog > .window > .frame {
    box-sizing: border-box;
    padding: 30px;
    height: 100%;
    overflow: hidden;
}

.dialog > .window > .frame > .body {
    position: relative;
    height: 80%;
}

.dialog .content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 120%;
}

.dialog .content > .scroll {
    overflow-y: scroll;
    overflow-x: hidden;
}

.dialog .content img {
    display: inherit;
    margin: auto;
    width: var(--imgMid);
    height: var(--imgMid);
}

.dialog .content > button {
    position: absolute;
    bottom: 0;
}

html[dir='ltr'] .dialog .content > button {
    right: 0;
}
html[dir='rtl'] .dialog .content > button {
    left: 0;
}

button.confirm {
    display: block;
}
html[dir='ltr'] button.confirm {
    margin-left: auto;
}
html[dir='rtl'] button.confirm {
    margin-right: auto;
}

.dialog form {
    margin-bottom: 20px;
}
.dialog form > label {
    display: block;
}

.dialog fieldset > label {
    display: block;
}
.dialog legend {
    cursor: default;
}

.dialog input:not([type]),
.dialog input[type="text"],
.dialog input[type="email"],
.dialog input[type="search"],
.dialog input[type="password"],
.dialog input[type="tel"] {
    display: block;
}

.dialog textarea {
    width: calc(100% - 20px);
    resize: vertical;
    min-height: 4em;
    min-width: 250px;
}

.twoc {
    display: inline-flex;
    width: 100%;
}
.twoc > .c0,
.twoc > .c1 {
    display: inline-flex;
    flex-direction: column;
    width: 50%;
    border: 2px solid var(--s2);
    box-sizing: border-box;
    background-color: var(--cO);
}

.dialog .c0 > img, .dialog .c1 > img {
    margin: 0 auto auto auto;
}

span.hc {
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: x-large;
}

span.fee {
    display: block;
    margin: 0 auto;
    text-align: center;
    font-size: large;
}

span.s1 {
    color: var(--s1);
}

.twoc > .c0:hover,
.twoc > .c0:focus,
.twoc > .c1:hover,
.twoc > .c1:focus {
    border: 2px solid var(--s1);
    outline: 0;
    cursor: pointer;
}

.code_row {
    position: relative;
    display: inline-flex;
    gap: 5px;
}
.code_row > input {
    display: inline;
    width: 40px;
    height: 40px;
    text-align: center;
}

.code_row > div {
    border-bottom: 4px solid var(--s2);

    padding: 0.5em;
    font-size: 1em;
    color: var(--s1);
    box-sizing: border-box;

    width: 40px;
    height: 40px;
}

input.code {
    position: absolute;
    display: inline;
    width: 40px;
    height: 40px;
    text-align: center;

    /* Doesn't need RTL-specific override*/
    left: var(--offX);
    top: var(--offY);
}

li.loader {
    display: block;
    height: 5rem;
    touch-action: none; /* Avoid pointer cancel on Android */
}

li.loader:not(:first-child) {
    border-top: 1px solid var(--cOT);
}

button > svg {
    pointer-events: none;
}

button.warn:disabled,
button.warn:hover:disabled {
    background-color: #888;
    color: #555;
}

button.warn {
    background-color: #f6f8fa;
    color: #cf222e;
    border-color: rgba(27,31,36,0.15);
    border-radius: 6px;
    font-weight: bold;
}

button.warn:hover {
    background-color: #a40e26;
    color: #ffffff;
}

li.loader > button {
    width: 5rem;
    height: 5rem;
    background: transparent;
    border: none;
}

li.loader > button use,
li.loader > button path {
    fill: var(--s1);
}

li.loader:hover, li.loader.focus {
    color: var(--s1);
}

li.loader > button.close:hover, li.loader > button.close.active {
    background: red;
}
li.loader > button.close:hover path, li.loader > button.close.active path {
    fill: black;
}

li.loader:hover {
    cursor: pointer;
}

li.loader.selected:not(:hover):not(.focus) span.loader_title {
    color: var(--s2);
}

li.loader span.loader_size {
    color: var(--cSS);
}

html[dir='LTR'] li.loader .loader_float {
    float: right;
}
html[dir='RTL'] li.loader .loader_float {
    float: left;
}

#aura .out {
    offset: 0%;
    stop-color: white;
    stop-opacity: 0.5;
}
#aura .in {
    offset: 100%;
    stop-opacity: 0;
}
.aura {
    fill: url('#aura');
    pointer-events: none;
    touch-action: none;
}
.aura.v {
    width: var(--auraDim);
}
.aura.h {
    height: var(--auraDim);
}
.aura.cnr {
    width: var(--auraDim);
    height: var(--auraDim);
}

@keyframes fade {
  0% {opacity: 1} 
  100% {opacity: 0}
}
.aura.fade {
  animation: 5s fade forwards;
}