/* Varelyno: the Rich colour mode (13 Oct), see v13-colour-modes.js. Light
   and easy to read, with the theme colour really there. Cards stay white so
   text stays crisp; the colour goes on the page, the side menu, the bar, the
   open item, card headers and tags. --v-accent is the theme colour, deep
   enough for white text (checked in the script). */

html.v-universe[data-mode="rich"] body,
html.v-universe[data-mode="rich"] .app-shell,
html.v-universe[data-mode="rich"] .main-content{background:var(--bg)!important}

/* side menu: tinted, the open page filled in */
html.v-universe[data-mode="rich"] #sidebar.sidebar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--v-accent) 19%,#fff),color-mix(in srgb,var(--v-accent) 10%,#fff))!important;
  border-right:1px solid color-mix(in srgb,var(--v-accent) 18%,transparent)!important}
html.v-universe[data-mode="rich"] #sidebar .nav-btn{color:color-mix(in srgb,var(--text) 92%,var(--v-accent))}
html.v-universe[data-mode="rich"] #sidebar .nav-btn:hover{background:color-mix(in srgb,var(--v-accent) 12%,transparent)!important}
html.v-universe[data-mode="rich"] #sidebar .nav-btn.active,html.v-universe[data-mode="rich"] #sidebar .nav-btn.active *{color:var(--v-accent-ink,#fff)!important}
html.v-universe[data-mode="rich"] #sidebar .nav-btn.active{
  background:linear-gradient(135deg,var(--v-accent),color-mix(in srgb,var(--v-accent) 82%,#000))!important;
  color:var(--v-accent-ink,#fff)!important;box-shadow:0 8px 20px -10px var(--v-accent)!important}
html.v-universe[data-mode="rich"] #sidebar .nav-btn.active .nav-ico,
html.v-universe[data-mode="rich"] #sidebar .nav-btn.active .nav-count{color:var(--v-accent-ink,#fff)!important}
html.v-universe[data-mode="rich"] #sidebar .nav-btn.active .nav-count{background:rgba(0,0,0,.24)!important}
html.v-universe[data-mode="rich"] .nav-rule,html.v-universe[data-mode="rich"] .sidebar .divider{background:color-mix(in srgb,var(--v-accent) 22%,transparent)!important}

/* top bar */
html.v-universe[data-mode="rich"] #topbar.topbar{
  background:color-mix(in srgb,var(--v-accent) 14%,#fff)!important;
  border-bottom:1px solid color-mix(in srgb,var(--v-accent) 24%,transparent)!important}
html.v-universe[data-mode="rich"] #topbar .workspace-switch button.active{background:var(--v-accent)!important;color:var(--v-accent-ink,#fff)!important}

/* the page heading */
html.v-universe[data-mode="rich"] .page-head .v9-eyebrow,
html.v-universe[data-mode="rich"] .page-head .eyebrow{color:var(--v-accent)!important}

/* card headers and panel titles carry the colour */
html.v-universe[data-mode="rich"] .card>.card-head,
html.v-universe[data-mode="rich"] .card>.dash-head{
  background:linear-gradient(90deg,color-mix(in srgb,var(--v-accent) 20%,#fff),color-mix(in srgb,var(--v-accent) 8%,#fff))!important;
  border-bottom-color:color-mix(in srgb,var(--v-accent) 18%,transparent)!important}
html.v-universe[data-mode="rich"] .card{border-color:color-mix(in srgb,var(--v-accent) 16%,var(--line))!important}

/* project tabs: the bar tinted, the open tab filled */
html.v-universe[data-mode="rich"] .project-workspace .detail-tabs{background:color-mix(in srgb,var(--v-accent) 8%,#fff)!important}
html.v-universe[data-mode="rich"] .project-workspace .detail-tabs .detail-tab.active{
  color:var(--v-accent)!important;border-bottom-color:var(--v-accent)!important;
  background:color-mix(in srgb,var(--v-accent) 12%,#fff)!important}

/* tags, chips and pills: stronger */
html.v-universe[data-mode="rich"] .tag,
html.v-universe[data-mode="rich"] .mini-tags .tag{background:color-mix(in srgb,var(--v-accent) 14%,#fff)!important;color:color-mix(in srgb,var(--v-accent) 75%,#000)!important;border-color:transparent!important}

/* buttons */
html.v-universe[data-mode="rich"] .btn.primary{background:var(--v-accent)!important;border-color:var(--v-accent)!important;color:var(--v-accent-ink,#fff)!important}
html.v-universe[data-mode="rich"] .btn:not(.primary):not(.danger):not(.link):hover{border-color:color-mix(in srgb,var(--v-accent) 40%,var(--line))!important}

/* the phone bar along the bottom */
html.v-universe[data-mode="rich"] .mobile-bottom-nav{background:color-mix(in srgb,var(--v-accent) 9%,#fff)!important;border-top-color:color-mix(in srgb,var(--v-accent) 18%,transparent)!important}
html.v-universe[data-mode="rich"] .mobile-bottom-nav .active,
html.v-universe[data-mode="rich"] .mobile-bottom-nav [aria-current="page"]{color:var(--v-accent)!important;background:color-mix(in srgb,var(--v-accent) 14%,#fff)!important}

/* ------------------------------------------- the mode choice, in the studio */
.vx-mode{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 6px}
.vx-mode-btn{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:8px 8px 9px;border-radius:14px;cursor:pointer;font:inherit;
  border:1.5px solid var(--line,#dce5eb);background:var(--surface,#fff);color:var(--text,#243b4e);
  transition:border-color .5s cubic-bezier(.16,.84,.3,1),box-shadow .5s cubic-bezier(.16,.84,.3,1)}
.vx-mode-btn b{font-size:13px;font-weight:650;text-align:center}
.vx-mode-btn[aria-checked="true"]{border-color:var(--a,#187bb1);box-shadow:0 0 0 3px color-mix(in srgb,var(--a,#187bb1) 20%,transparent)}
.vx-mode-btn:focus-visible{outline:3px solid color-mix(in srgb,var(--a,#187bb1) 45%,transparent);outline-offset:2px}
.vx-mode-art{position:relative;display:block;height:42px;border-radius:10px;background:var(--m1);overflow:hidden;border:1px solid rgba(0,0,0,.06)}
.vx-mode-art i{position:absolute;display:block}
.vx-mode-art i:first-child{left:8px;right:8px;top:8px;bottom:8px;border-radius:7px;background:var(--m2)}
.vx-mode-art i:last-child{left:14px;top:15px;width:38%;height:9px;border-radius:999px;background:var(--m3);box-shadow:0 0 12px var(--m3)}
.vx-mode-say{margin:4px 0 10px;font-size:12.5px;line-height:1.5;color:var(--muted,#637586)}

/* Night test fixes (13 Oct) */
/* the open project tab: on a project page the tabs wear the PROJECT colour, so the text does too */
html.v-universe[data-mode="rich"] body.project-mode #mainContent .detail-tabs .detail-tab.active{color:var(--pt-deep,var(--v-accent))!important;border-bottom-color:var(--pt-deep,var(--v-accent))!important}
/* "Back to network" in the theme colour, which is deep enough on the Rich page */
html.v-universe[data-mode="rich"] .page-title .btn.link{color:var(--v-accent)!important}
/* studio: the tick on a colour tile, and the chosen opening-line icon, readable on every accent */
.st-theme-tick{color:var(--ai,#fff)!important}
.st-ol-opt[aria-checked=true] .st-ol-ico{color:var(--v-accent-ink,#fff)!important}
/* phone map Tools "Done" on the accent */
.v9-tools-done{color:var(--v-accent-ink,#fff)!important}

/* Table header bands get soft rounded corners, like the cards around them (14 Oct).
   Rounded cells need separate borders; spacing 0 keeps the rows looking the same. */
#mainContent .table{border-collapse:separate;border-spacing:0}
#mainContent .table thead th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
#mainContent .table thead th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}

/* Move or copy a project to another World or Hat (14 Oct) */
.vx-move fieldset{border:0;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.vx-move legend{font-size:12px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;color:var(--muted,#5b6d7e);margin-bottom:8px;padding:0}
.vx-move-opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface,#fff);cursor:pointer;transition:border-color .3s cubic-bezier(.16,.84,.3,1),box-shadow .3s cubic-bezier(.16,.84,.3,1)}
.vx-move-opt:hover{border-color:color-mix(in srgb,var(--accent,#1E86C8) 45%,var(--line))}
.vx-move-opt:has(input:checked){border-color:var(--accent,#1E86C8);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#1E86C8) 16%,transparent)}
.vx-move-opt input{margin:0;flex:none;accent-color:var(--accent,#1E86C8)}
.vx-move-opt i{flex:none;width:12px;height:12px;border-radius:50%}
.vx-move-opt span{display:grid;gap:2px;min-width:0}
.vx-move-opt strong{font-size:14px;overflow-wrap:anywhere}
.vx-move-opt small{font-size:12px;color:var(--muted,#5b6d7e);line-height:1.35}
.vx-move .form-hint{margin:4px 0 0;font-size:13px;line-height:1.5}